Топ-100 Инструменты для создания прототипов: от макета, собранного на скорую руку, до полнофункциональных прототипов | UXLab
Новый пользователь вашего продукта — как ему помочь?
Новый пользователь вашего продукта — как ему помочь?
01.08.2016
В интернетах есть множество материалов по теории UX, но советы ниже являются результатом тяжелой работы автора, что-то вроде шишек, набитых в процессе. Antoine признается, что облажался бессчётное количество раз за последние 20 лет, и описанные истины — это лишь некоторые из способов избежать провалов. Не повторяйте ошибок, наслаждайтесь. Четыре истины о дизайне Вообще-то это не сложно, даже в половину не так трудно, как вы думаете. 1. Цвет не имеет смысла Пользователи не понимают вашего цветокодирования. Зеленый значит «хороший» для вас, но для кого-нибудь другого на другом экране это может значит «нечитаемое» или «гусиное дерьмо» или «Сайгон? Что? Я до сих пор в Сайгоне?». Каждый человек видит цвет исключительно по-своему, если вообще видит. Он любит одни цвета, и ненавидит другие. И это в значительной степени непредсказуемо. Вы не сможете угадать. Цвет не является вербальным или рациональным. Он контекстен и эмоционален. Цвет — сильный инструмент, но сам по себе он не имеет смысла. Единственное что вы можете сделать с цветами это: Любой цвет: элемент имеет цвет Другой цвет: элемент отличается от другого элемента Серый: что-то сломано Красный: дизайнер ненавидит вас и хочет разозлить 2. Наибольшее значение имеет позиция Пользователей не заботит, что значат ваши иконки на кнопках, или что на них написано. Вы можете изменять их каждый день, и никто не будет жаловаться. Измените позицию элементов, и пользователи насадят вашу голову на пику. Люди используют их моторную память при использовании приложений. Перемещение элементов интерфейса ощущается как изощрённый метод пыток. Если вы хотите знать, что такое чистая нефильтрованная горящая ненависть, идите и поменяйте несколько элементов местами. 3. Никто не читает Вы, скорее всего, не читаете это предложение. Если читаете, то вероятно, не читали эту статью целиком с первого раза. Вы пробежались от заголовков к цитатам и может быть пропустили пару пунктов перед тем как прочитать этот абзац. Так что это правда. И тем не менее, почему же мы пишем пояснительный текст? Почему мы позволяем себе длинные параграфы в наших интерфейсах? Почему мы делаем вид, что руководство пользователя и часто задаваемые вопросы являются правильным решением для проблем юзабилити? Потому что мы ленивые, вот почему! Слишком ленивы, чтобы читать, и слишком ленивы, чтобы не писать. 4. Навигация — это провал Не гордитесь вашим интерфейсом навигации, или информационной архитектурой. Если важной частью вашего интерфейса является навигация, вы уже на пути к провалу. Ваша задача – помочь пользователю достичь своей цели. Навигация по приложению НЕ цель пользователя. Если вы сделали свою работу правильно, ваше приложение будет делать только одну вещь и будет делать это хорошо, находясь все это время на одном экране. Но вы не в состоянии решить что-либо за пользователя или вовсе устранить выбор, и вы оставляете выбор на откуп пользователю пользователю. Дизайн – это принятие тяжёлых решений, для того, чтобы избавить от принятия решения пользователя. Да, хорошо, навигация необходима для большинства приложений, большинства сайтов, и пользователь, в конце концов, привык пользоваться навигацией. Мы должны пойти на некоторые компромиссы. Я безусловно согласен. И почти всегда иду на этот компромисс и внедряю навигацию. Тем не менее, мне стыдно и вам должно быть. Три истины о процессе Не все части приложения одинаково важны. Есть некоторые вещи, которые вы должны сделать в первую очередь, некоторые вещи про которые не стоит забывать, и некоторые, которые можно полностью проигнорировать. 5. Контент – хорошо, UI – плохо Моей первой UX-работой еще до того, как концепция UX была сформулирована, была Информационный Архитектор. Это до сих пор наиболее важная работа, которая есть на любом проекте. Вещи имеют имена и должны быть названы. Определение имен и глаголов является наиболее важной частью UX. Контент является решением. Если вы не проектируете контент, вы проектируете проблемы. Каждый раз, когда вы создаете каркасы с Lorem Ipsum, вы оскорбляете своих пользователей и злоупотребляете доверием вашего клиента. А также саботируете сами себя. Loremipsitis – это плохо, поверьте, я видел фото. Когда вы не в состоянии бороться с фактическим содержанием, но сосредоточены на проектировании каркасов, которые будут независимы от содержания, вы на самом деле создаете барьер между пользователем и их целью. Прекратите немедленно. Спроектируйте контент и вы, скорее всего, справитесь с задачей автоматически. 6. Прокрастинация – это хорошо Делайте карту сайта и навигацию в последнюю очередь. Вообще-то, не делайте их вовсе. Начните с самых важных объектов на экране: с того, который помогает пользователю достичь своей цели. Все излишки времени и бюджет должен быть направлен на то, чтобы сделать этот экран идеальным. Зацикливайтесь на каждой детали. Тратьте все время для полирования каждого пикселя. Не отказывайте себе в удовольствии наслаждаться каждой минутой разработки. Когда наступит дедлайн или закончится бюджет на разработку, ваш клиент/босс будет очень злым, будет кричать на вас, что вы не сделали все остальное фуфло, которые они хотели втиснуть в пользователя. Будьте немым, извиняйтесь и заработайте репутацию того, кто никогда не закончит ничего… Проваливайте план, чтобы не проектировать ненужные части. Будем надеяться, что весь ненужный мусор будет откладываться до следующей версии, а пользователь будет наслаждаться чистым продуктом, пока вас не уволят, и тот, кто вас заменит, испортит этот идеал. На рынке нет недостатка в UX-дизайнерах, которые делают то, что им говорят, и то, что от них ожидают. Вот почему так много некачественных продуктов. Не будьте одним из них. 7. Юзер-тесты убивают детей Юзер тесты — это что-то невероятное, это хорошо известный факт. Не важно, насколько невероятно вы умны, и насколько хорош ваш интерфейс. Десять минут юзер-теста на ранних стадиях проекта может уберечь вас от неудачи в конце пути. Юзер-тесты рулят. Если вы не делаете их — вы идиот. Тем не менее, юзер-тесты не освобождают вас от необходимости быть умным, работать, потеть над каждой мелочью и пройти через сумасшедший, извилистый, причудливо аморфный процесс проектирования. Вы по-прежнему должны быть гением. И это особенно верно, когда вы разрабатываете инновационное решение или продукты. Когда дело доходит до инноваций, пользователи могут быть злыми, недалекими, близорукими, тщеславными, глупыми и т.д. И с этим приходится мириться. Юзер-тесты новых идей отстой. Если вы делаете их — вы идиот. Когда у вас есть прекрасная новая идея, она начинает свою жизнь с хрупкого зародыша, едва дышащего. Она нуждается в воспитании и нежной заботе, чтобы превратиться в полностью сформированную инновацию, которая сможет стоять крепко на своих двух ногах и выдержать неосторожное обращение с корыстными пользователями. Юзер-тестирование новой идеи как акулотестирование нового ягненка. Это заканчивается плохо, как для идеи, так и для ягненка. Так что не позволяйте вашей идеи идти к непосвященным… но только пока она не будет готова. Как узнать о том, что идея готова? Когда вы работали над ней достаточно долго, вы начинаете видеть существенные недостатки: проблемы, которые состоят в том, как идея работает в общем, а не в том, как это все совместить с уже существующими. Когда идея начинает работать близко к тому, как вы задумали, что сами начинаете думать об альтернативах – пора проверять. Две истины о программистах Вы можете думать, что ошибка кодеров — не ваша вина. Справедливо, но все-таки это ваша ответственность. Так же, как отправка сообщения, которое никогда не будет получено, дизайн, который не будет понят – пустая трата времени. Вы должны понимать свою аудиторию, а ваша аудитория – программисты. Они странные животные, но в конце концов вы тоже. Если вы хорошо заботитесь о дев отделе, разработчики сделают вас богатым и знаменитым. Научитесь уже кодить, вообще-то уже пора, но пока вы этого не сделали, вот что нужно знать о программистах: 8. Программисты учатся на ужасных примерах Разработчики не исследуют хорошо разработанные приложения и сайты, чтобы узнать, как они создавались. Они тратят свое время на обучение с помощью демоверсий и руководств, которые написаны другими кодерами, пытаясь объяснить сложные понятия кодирования, используя надуманные и смешные примеры. Учебники по программированию учат худшим UX-практикам. Они не думают о реальном применении этих примеров. Они не думаю о UX этих примеров. Их не заботит, приведут ли эти примеры к положительным результатам в своих вымышленных сценариях. Тысячи разработчиков изучают свое ремесло, слепо реализуя чрезмерно простые, плохо разработанные, глупые сценарии. Они разрабатывают свои приложения с помощью нескольких неуклюжих форм и сотен часов безумных руководств. Так что, возможно, вы должны быть немного более конкретными с вашими спецификациями? 9. Программисты любят нелепость Программистам приходится беспокоится о вещах, о которых не подумает ни один нормальный человек. Вы можете поместить поле «Фамилия» в ваш дизайн, но у программиста возникнет сотня тревог: • Что делать, если у человека нет фамилии? • Что делать, если фамилия выражается в виде математического уравнения? • Что делать, если фамилия длиннее 255 символов? • Что делать, если фамилия содержит символы табуляции, несколько абзацев, неразрывные пробелы, смайлики, круглые скобки, запятые, одинарные и двойные кавычки? • Что делать, если фамилия изменяется со временем? Для любого нормального человека, эти вопросы являются абсурдными, но для программистов — нет. Для дизайнера это значит, что он должен держаться рядом с программистами, понять их как можно лучше, чтобы предвидеть подобные тревоги, и удержать их от полной невменяемости.
Девять простых UX истин
22.09.2016

Инструменты для создания прототипов: от макета, собранного на скорую руку, до полнофункциональных прототипов

Инструменты для создания прототипов: от макета, собранного на скорую руку, до полнофункциональных прототипов

Инструменты для создания прототипов: от макета, собранного на скорую руку, до полнофункциональных прототипов

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

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

Сегодня я перечислил несколько лучших инструментов, существующих в индустрии.

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

InVision

image

InVision поможет вам с любым веб- или мобильным проектом. Не важно для какой операционной системы создается проект – iOS или Android, данный инструмент работает с ними обеими. Также InVision рассчитан на работу в команде. С его помощью можно с легкостью работать над проектом и обмениваться идеями совместно с другими членами вашей команды.

Marvel

image

Marvel – это еще один крупный игрок на рынке инструментов по созданию прототипов. Он позволяет вам преобразовать ваши макеты, дизайны и наброски в прототипы мобильных и веб-приложений или даже в прототип приложения для Apple Watch.

Proto

image

Proto.io – это превосходный инструмент, который позволяет создавать полностью интерактивные прототипы мобильных приложений. Вы сможете создавать интерактивные высокоточные прототипы, которые будут выглядеть и работать именно так, как должно работать ваше приложение. И при этом данный инструмент не требует от вас навыков написания кода.

Moqup

image

Moqups – это еще один широко известный инструмент. Но он немного отличается от остальных. Платформа основана на HTML5, она является прекрасным инструментом для создания макетов с масштабируемой векторной графикой (SVG), которые не зависят от разрешения экрана.

Fluid

image

Fluid – это инструмент для создания прототипов мобильных приложений. Существует множество обзоров данного онлайн-инструмента, и многие пользователи говорят, что он очень быстро работает, удобен для пользователя и интуитивно понятен.

Prott

image

Prott – это инструмент для быстрого создания прототипов и для совместной работы. Он берет ваши идеи из первых набросков и переносит их в интерактивный прототип, который работает, как настоящее приложение. Также Prott является превосходным инструментом для создания дизайна и взаимодействия с другими членами команды.

Flinto

image

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

POP

image

Если вам нравятся традиционные методы создания прототипа, например, создание нарисованных от руки макетов, то POP – это подходящий вам инструмент. Просто сделайте набросок идей для вашего приложения в вашей записной книжке, сфотографируйте ее и добавьте взаимосвязи между созданными таким образом макетами. После этого просто синхронизируйте прототипы вашего приложения с Dropbox и вы сможете воспроизвести приложение на смартфоне.

Pixate

image

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

Axure

image

Axure – это инструмент для создания прототипов. Данная программа может использоваться для создания веб-приложений и приложений для настольного компьютера. Мне нравится то, что в данной программе реализован функционал перетаскивания, форматирования и изменения размера виджетов.

Framer

image

Framer – еще один известный инструмент. Он может быть использован для создания прототипов для iOS, Android, настольных компьютеров и веба. С использованием Framer вы сможете придумывать взаимодействия и анимацию. Вы можете интегрировать данный инструмент с Photoshop или приложением Sketch.

Webflow

image

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

Mockplus

image

У Mockplus есть одна прекрасная особенность – он невероятно быстро работает! В основном Mockplus используется для настольных компьютеров, но он может быть с легкостью использован также и для мобильных или веб-проектов. Понятный интерфейс также позволяет вам более эффективно работать, так как вы можете сконцентрироваться на создании проекта, а не на функциях инструмента.

Justinmind

image

Justinmind – это один из первых появившихся на рынке инструментов для создания прототипов. Он был создан в 2008 году. За столь продолжительное время команда, создавшая данный инструмент, проделала восхитительную работу. Он очень хорошо работает! Данный инструмент – прекрасный вариант, если вам необходимо создавать веб-сайты, мобильные приложения и другие веб-проекты.

Vectr

image

Vectr – это новый игрок на рынке, и он все еще находится в стадии бета-тестирования. При помощи данного инструмента вы можете создавать ваши веб-приложения или приложения для настольного компьютера, использующего операционные системы Mac и Windows. К тому же он абсолютно бесплатен. Все прототипы могут быть выгружены и интегрированы в такие приложения, как Slack.

Principle

image

Инструмент для создания прототипов Principle доступен только для Mac. Он работает в паре с приложением для iOS, которое позволяет запускать прототипы. Principle позволяет вам экспортировать прототипы в видео или GIF-форматы. Интерфейс инструмента очень похож на интерфейс приложения Sketch. Если ранее вы пользовались приложением Sketch, то у вас не возникнет трудностей с использованием Principle.

PowerMockup

image

PowerMockup очень сильно отличается от других приложений. Данный инструмент – это дополнение к Microsoft PowerPoint, которое превращает эту программу в полноценный инструмент по созданию прототипов. С данным расширением вы сможете создавать макеты для любых веб-приложений или приложений для настольных компьютеров.

Atomic

image

Atomic – это невероятный инструмент для создания прототипов, и он формирует незабываемое первое впечатление. Atomic – это веб-приложение, которому для работы требуется Google Chrome. Если вы используете Safari, Firefox или браузеры Windows, данный инструмент может работать отвратительно. Atomic может использоваться для создания Apple Watch, Android, iOS и веб-проектов.

Balsamiq

image

Balsamiq – это один из самых простых инструментов. Он позволяет вам перетаскивать любой элемент на черный фон. Данный инструмент может интегрироваться с Google Docs для импорта ваших прототипов и файлов дизайна. Balsamiq доступен, как программа для Mac или Windows, а также имеет веб-версию.

Adobe Comp CC

image

Adobe Comp CC – это еще один великолепный инструмент от Adobe. Он позволяет вам создавать веб, мобильные и печатные проекты и далее интегрировать их с другими утилитами Adobe для создания дизайна. Например, Photoshop, Illustrator или InDesign. Также Adobe CC Comp работает с Adobe Stock, который предоставляет сотни шрифтов, картинок и графических решений.

https://habrahabr.ru/post/306724/

Добавить комментарий

Ваш e-mail не будет опубликован.

Бесплатный звонок

 

Вы можете оставить номер и мы сами вам перезвоним 

Представьтесь, пожалуйста:

Введите ваш номер

 

×
Заказать юзабилити-аудит

 

Для заказа аудита заполните, пожалуйста, форму, либо свяжитесь с нами по телефону: +375 29 378 16 13

Представьтесь, пожалуйста:

Как с вами связаться? Например, телефон, e-mail или скайп
Расскажите немного о вашем проекте:(необязательно)

 

×
Заказать веб аналитику

 

Для заказа веб аналитики заполните, пожалуйста, форму, либо свяжитесь с нами по телефону: +375 29 378 16 13

Представьтесь, пожалуйста:

Как с вами связаться? Например, телефон, e-mail или скайп
Расскажите немного о вашем проекте:(необязательно)

 

×
Заказать проектирование

 

Для заказа проектирования заполните, пожалуйста, форму, либо свяжитесь с нами по телефону: +375 29 378 16 13

Представьтесь, пожалуйста:

Как с вами связаться? Например, телефон, e-mail или скайп
Расскажите немного о вашем проекте:(необязательно)

 

×
С нами очень просто связаться

 

Вы можете оставить свои контакты и мы сами вам перезвоним 

Представьтесь, пожалуйста:

Введите ваш номер

Или адрес электронной почты, если вам удобнее общаться через нее

 

×