Эта статья основана на нашей предыдущей статье о процессе мобильного проектирования , в которой более подробно рассматриваются этапы создания прототипов бумаги и создания каркасов приложений. В конце у меня будет список различных инструментов, которые вы можете использовать для создания каркасов и прототипов.
Проектирование взаимодействия для мобильных устройств — общая тема разговоров среди специалистов по пользовательскому интерфейсу (UX) , но как насчет тех из нас, кто только иногда работает с UX? Многим дизайнерам и разработчикам назначаются проекты, которые не могут позволить себе роскошь привлекать UX-специалиста, но, конечно, все еще ожидают создания элегантных, интуитивных интерфейсов.
Каркасное и бумажное прототипирование
В настоящее время в сообществе пользовательского опыта обсуждается необходимость создания каркасов в веб-дизайне, и я начал задаваться вопросом: «Применимо ли это к мобильным устройствам?». Работали»? Нет, я думаю, что это нечто большее. Каркас и макетирование бумаги определенно развиваются, так как мастерство и вкусы пользователей в Интернете становятся все более изощренными, но эта практика все еще является очень ценным компонентом в мобильном дизайне.
Бумажное прототипирование на первом месте
По моему опыту, существует огромная разница в форме и функциях каркасов по сравнению с бумажными прототипами, даже если эти термины можно использовать взаимозаменяемо. В моем процессе проектирования мобильных устройств первое, что происходит после того, как мы выясним, кто и как использует приложение, — это бумажные прототипы — НЕ каркасные.
Некоторые утверждают, что «бумага мертва» и рассказывают о преимуществах цифрового прототипирования . Другие утверждают, что карандаш и бумага укрепляют дизайн . Лично я придумываю более гибкие схемы, когда я не за компьютером. Тем не менее, мы все люди с разными предпочтениями и мышлением. Может быть, вы можете быть столь же креативным перед своим компьютером; это то, что каждый дизайнер должен придумать для себя!
Одна вещь, которая мне нравится в автономном бумажном прототипировании, это скорость, с которой вы можете повторять дизайн. Я использую липкие заметки размером с экран, которые можно быстро снять, переработать, перегруппировать и т. Д. После создания потока для приложения пришло время закрепить экранные элементы в каркасной версии.
Каркасы на втором месте и должны быть общими
Даже если это приложение для вашего собственного внутреннего «клиента», каркасы служат еще одним обзором, чтобы убедиться, что приложение работает таким образом, что обслуживает как пользователя, так и бизнес. Вы можете пропустить этот процесс и перейти прямо от бумажных прототипов к Photoshop для разработки графического интерфейса. Я знаю, что это заманчиво, но не делай этого! Момент, когда вы начинаете работать в пузыре, — это то же самое время, когда вы поддаетесь «Проклятию знаний».
В книге « Сделано на палочке» авторы и братья Чип и Дэн Хит рассказывают о «проклятии знаний» и его влиянии на нашу способность создавать новые «липкие» идеи. Предпосылка, касающаяся мобильного дизайна, заключается в том, что как только вы начнете создавать базу знаний о мобильном дизайне и технологиях, тем больше вы отдаляетесь от «типичного пользователя приложения». Вы не можете себе представить, что значит быть вашей аудиторией, даже если вы идеально подходите под профиль. Ваша способность поставить себя на место своей аудитории омрачается всем, что вы уже знаете о приложении, как оно работает и что, по вашему мнению, хочет аудитория.
Как только мы узнаем что-то, нам трудно представить, каково это — не знать этого. Наши знания «прокляли» нас. — Сделано, чтобы придерживаться
Все это означает, что вы должны использовать каркас и делиться этими каркасами с целевой аудиторией вашего приложения.
Теперь, когда определены каркасные и бумажные прототипы в мобильном контексте, я бы хотел выделить пять основных вещей, которые вы должны делать в своих сеансах каркасного моделирования и бумажного макетирования. Легко просто набросать кучу набросков и назвать это днем, особенно если вы уделяете основное внимание не дизайну пользовательского опыта.
Я надеюсь, что эти советы помогут вам продумать взаимодействие с пользователем вашего приложения, сделав его простым, пошаговым процессом, который повторяется и за которым легко следовать!
1. Сосредоточьтесь на основной задаче
Первое, что нужно сделать, прежде чем даже подумать о том, чтобы положить перо на бумагу, — это задать себе вопрос: какова основная задача вашего приложения? Конкретно запишите:
(Ваш дифференциатор) (Ваше решение) для (Ваша аудитория).
Давайте рассмотрим пример для приложения Evernote:
«Evernote для iPhone позволяет создавать заметки, снимать фотографии и записывать голосовые заметки, к которым можно в любое время обращаться с iPhone, компьютера или из Интернета».
Копия на их веб-сайте четко объясняет основную задачу приложения:
(Omni-доступный) (создание и хранение нескольких типов файлов) для (случайных пользователей iPhone).
Определите этот оператор для своего приложения и закрепите его там, где вы будете часто его видеть при работе с прототипами. Это поможет вам сосредоточиться на одной вещи, которую приложение ДОЛЖНО сделать.
2. Создайте сценарии использования
После того, как вы определили свою основную задачу, вы, вероятно, также подумаете о том, кто хочет приложение, которое выполняет эту задачу! Варианты использования — ЛУЧШИЙ способ начать процесс создания бумажного прототипа. В этой статье я расскажу о том, как я определил сценарии использования для нашего приложения Doodle Bright . Я дал «своим людям» имя, адрес, род занятий и особый сценарий, когда они могут использовать такое приложение, как Doodle Bright.
Вот пример:
Джейн ждет в кабинете врача трехчасовую встречу со своим 4-летним сыном Чедом. Она принесла свой iPad на случай, если ожидание будет дольше, чем ожидалось, и, конечно, они застряли в комнате ожидания на полчаса, прежде чем их вызовут. Джейн проводит время, рисуя грузовики и поезда с Чедом, пока они ждут ее встречи.
В этом сценарии Джейн и Чад играют вместе с приложением, что означает, что мама может подсказать ему, как взаимодействовать с различными элементами на экране, если он не уверен в следующем шаге.
Теперь давайте посмотрим на этот пример:
Джейн в очереди, чтобы забрать старшую из школы. Чад на заднем сиденье, ему скучно после дня бега по делам. Джейн вручает ему свой iPad с запущенным приложением Doodle Bright. Чад знает, какие кнопки нажимать, потому что они интуитивно понятны 4-летнему.
В этом сценарии элементы управления должны быть легко понятными для ребенка без присмотра. Меняет ли это типы бумажных прототипов, которые вы создаете для этого приложения? Черт возьми, да! Теперь, вместо того, чтобы придумывать для мамы и сына более широкую привлекательность, мы видим, что первичные прототипы должны быть ориентированы только на ребенка.
Может быть очевидно, что подобное приложение потребует «думать как ребенок», но без этого сценария сценария использования для поддержки этого утверждения вы можете попасть в «взрослый» режим мышления по поводу дизайна.
3. Определите умственные модели
В своей статье о « Секрете создания интуитивного интерфейса » Сьюзен Вайншенк рассказывает о том, как согласовать ваш дизайн с тем, что пользователь ожидает увидеть. Чем лучше вы сможете это сделать, тем более интуитивным будет ваш интерфейс.
4. Проверьте поток
Я часто нахожу, что у меня есть идеальный поток, определенный для приложения, и затем я нахожу что-то, что упустил. Был там? Это усугубляет, но я обнаружил, что одна вещь, которая может воспрепятствовать большому количеству «опущенных аутов», это думать вне «идеального» сценария.
Пример из сценария Doodle Bright — когда Чад создает совершенно потрясающую картинку, которую Джейн хочет сохранить и распечатать, но он случайно закрывает приложение. Ооо Что теперь? Вы учитывали автоматическое сохранение в своих бумажных прототипах? Я надеюсь, что это так!
5. Найдите метод, который работает для вас
Как я уже упоминал ранее, каждый по-своему уникален и креативен. Вы должны найти метод, который выжмет максимум из вас. Бумажное прототипирование — одно из самых креативных упражнений в процессе разработки приложений, над которым вы должны работать в «лучшие» часы, среду и т. Д.
Другие источники
Существует множество статей с десятками ресурсов и инструментов для создания каркасов. Я надеюсь, что эта статья убедила вас, что это задача, которую вы можете решить, даже если вы не являетесь экспертом по пользовательскому опыту. Взгляните на следующие ссылки и, пожалуйста, запишите все, что я оставил в комментариях ниже.
Чтобы получить отличную статью о каркасном дизайне в целом, перейдите к разделу « Преимущества каркасного моделирования », чтобы узнать принципы, применимые как к веб-приложениям, так и к мобильным приложениям.
Далее ознакомьтесь с кратким обзором процесса создания каркаса, который стоял за iPad-приложением Washington Post . Лично я хотел бы видеть больше информации об этом!
Другие ссылки Примечание:
Набор шаблонов для печати эскизов для мобильных приложений.
Огромный список инструментов для каркасного и бумажного макетирования .
Точно так же, как сказано: « отличные ресурсы для каркасной работы ».
