Дизайн взаимодействия — это процесс определения поведения вашего интерфейса. Для дизайна формы я не могу не подчеркнуть, насколько это важно. Наличие четкого, ориентированного на пользователя плана дизайна ваших форм — это лучший способ обеспечить их успех. Именно здесь дизайн помогает поддерживать отношения между формой и пользователем.
Определение цели
Важной частью планирования любого проекта является определение того, что требуется. Написание документации, определение потоков задач и выполнение тестирования может показаться скучным, неинтересным предприятием. Тем не менее, некоторое внимание к деталям может значительно улучшить и проинформировать ваш процесс проектирования; Имея четкое представление о том, чего должны достичь ваши формы, легче создать решение, которое наилучшим образом соответствует потребностям ваших пользователей. Причудливые эффекты и графика могут придать форме привлекательный вид, но если она не может обеспечить необходимое решение, то дизайн рушится.
Создание документации, описывающей ожидаемое поведение системы, является важной задачей, и полученный материал очень удобен, когда вы работаете с другими или для клиента. Этот тип документа формально известен как функциональная спецификация .
Определить пользователей
Кто будет использовать эти формы? Являются ли пользователи технически подкованными? Получат ли они выгоду от модных, прогрессивных улучшений, о которых вы думаете, или это станет для них помехой? Некоторые дизайнеры зашли так далеко, что создали пользовательских персонажей , вымышленных персонажей, которые помогают дизайнеру определить потребности и способности людей, которые будут пользоваться сайтом.
Для обсуждения пользовательских персон и создания собственных, посетите http://www.hhs.gov/usability/analyze/personas.html.
Со своей стороны, я предпочитаю общаться с реальными людьми, которые вписываются в целевую аудиторию. В следующей таблице представлен мини-профиль четырех реальных людей, чьи интересы и способности мы будем использовать в качестве ориентира при планировании и создании наших форм.
| персона | Профиль |
|---|---|
| Дерек Фезерстоун | Занятия фитнесом: триатлон, велотренажеры
Технический уровень: очень удобно с Интернетом |
| Интересы в фитнесе: тренажерный зал, езда на велосипеде, WiiFit
Технический уровень: очень удобно с Интернетом |
|
| Келли Стил | Интересы в фитнесе: повседневная езда на велосипеде, теннис, спортзал
Технический уровень: Умеренно комфортно с Интернетом |
| Мэтью Уокер | Интересы фитнеса: баскетбол, гольф
Технический уровень: новичок в Интернете |
Определить варианты использования и сценарии
Рассматривая людей, которые будут использовать ваши формы, вы должны подумать о различных вариантах использования, которые сопровождают их: так же как и определение людей, которые будут использовать ваш сайт, и их целей, речь идет о том, как они могут достичь этих Цели с помощью форм на вашем сайте.
Варианты использования помогут вам ответить на ряд важных вопросов. Что вам (или вашему клиенту) требуется? Как будут использоваться данные формы? Для регистрации учетной записи в социальной сети, участники будут обязаны заполнить форму полностью, или они могут просто заполнить основы и заполнить ее позже? Какая информация должна оставаться публичной? Должны ли определенные виды информации быть конфиденциальными? Зачем кому-то регистрироваться, и что для них важно?
Понимать платформы и устройства
Возможно, вы используете последнюю версию Safari на своем большом MacBook Air, но другой пользователь, заполнивший форму, может быть обычным посетителем своего Blackberry.
Когда вы планируете форму, важно учитывать все платформы и устройства, которые могут использоваться для ваших форм, или вы можете вызвать много душевных страданий! Например, я использую Yelp для поиска ресторанов, и иногда я отправляю отзывы. Я хотел бы написать эти отзывы, как только я покину ресторан, но я никогда не делаю. Почему? Потому что форма ужасно раздражает и утомительна для использования на моем iPhone.
Ниже мы указали несколько браузеров, которые мы будем использовать для тестирования и уточнения дизайна нашей формы.
- Рабочий стол: Safari 3, Firefox 2, Internet Explorer 6+ (ограниченная функциональность)
- Mobile: универсальный мобильный CSS, специфичный для iPhone
Определить потоки задач
После того, как вы внимательно изучите пользователей, варианты использования и платформы, у вас должно появиться достаточно информации, чтобы составить схему шагов, необходимых для заполнения каждой формы — потока задач . Пришло время подумать об альтернативных путях и случаях ошибок. Нарисуйте его визуально, чтобы у вас было четкое представление о том, как выглядит ваш процесс; На изображении ниже показан пример схемы последовательности задач для формы регистрации и входа.
На этом этапе вы должны иметь достаточно четкое представление о том, что требуется в вашей форме. Пришло время положить ручку на бумагу!
Бумажное прототипирование
Создание бумажного прототипа вашей формы — это быстрый и простой способ прояснить ваши идеи и проблемы в начале процесса разработки формы. Нарисуйте свои формы на бумаге: сделайте их быстрыми, легкими и простыми, набросав базовую идею о том, как будет выглядеть каждая форма. Вы даже можете использовать быстрый и дешевый вариант, например, стопку заметок; если вы используете примечание для каждого объекта в вашей форме, легко экспериментировать с различными аранжировками. Используйте эту нарисованную от руки форму, чтобы оценить, как выглядит ваша форма. Удивительно, насколько яснее становятся ваши решения о вопросах формы, когда вы видите их перед собой.
Попробуйте прототип на своих коллегах — они могут увидеть вещи, которые вы пропустили. Если на этом этапе можно показывать свои формы публике, возможно, вы могли бы отправиться в ближайшее кафе и попробовать их на незнакомых людях, купив им чашку кофе.
Для хорошего, подробного введения в бумажное прототипирование, посмотрите статью Шона Медеро в A List Apart.
Wireframing
Теперь, когда вы завершили планирование, пришло время приступить к проектированию. Начните с грубых диаграмм или каркасов, прежде чем зацикливаться на блестящих кнопках. То, на чем мы сейчас фокусируемся — это макет. Диаграммы, которые вы увидите ниже, являются каркасами для примера веб-сайта.
Обратите внимание, что они простые, чистые и простые — здесь не нужно много деталей или сложных дизайнерских работ. Прямо сейчас мы только хэшируем основной поток и общую схему.
Зарегистрироваться каркас 
Расширенный поиск каркас 
Изменить пароль каркас 
Редактировать профиль каркас 
Каркас обратной связи 
Каркас настроек конфиденциальности 
Вы использовали этот процесс для дизайна взаимодействия? Чем отличается ваш подход и какой совет вы можете добавить?