План статьи:

1. Этапы проектирования интерфейса;
2. Пользователи;
3. Взаимодействие и требования;
4. Инфраструктура;
5. Детализация;
6. Инструменты для создания прототипов.

Любое сложное действие можно декомпозировать на более простые. Когда не представляешь, как решить задачу нужно пытаться ее разбивать на простые до тех пока не поймешь, что нужно делать. Проектирование интерфейсов — трудная задача, поэтому декомпозируем ее на этапы:
Исследование -> Моделирование пользователей -> Выработка требований -> Определение общей инфраструктуры -> Детализация -> Обсуждение.

Допустим, к вам пришел клиент и ему нужен сайт. Для начала вы конечно зададите ему кучу вопросов, проанализируете ответы, снова повторите эти итерации, до тех пор пока вам не станет ясна цель и задача клиента. У меня есть примеры, когда сразу после этого бросаются рисовать прототипы, презентовать их. Заказчику нравится, он словесно рисует пару правок и сайт отпускают в производство (дизайн, верстка, программирование). В итоге сайт работает, висит в интернете по какому-то адресу, а пользователи зайдя на него плюются и ругаются, не понимаю где им найти решение своей задачи. В некоторых случаях клиент не видит недовольства, но когда видит, то просит изменить структуру, внешний вид и т.д. Вы начинаете конечно менять, вам же платят, и тут начинают плеваться разработчики, мол структура уже готова, придется все менять, нельзя было сразу сказать. Конечно эти задачи им не интересны и результат от этого страдает.

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

Вопросы можно разделить на группы:
Зачем люди будут заходит на сайт? Будь то интернет-магазин, социальная сеть, сайт компании и т.д., пользователи хотят решить конкретную задачу, у них есть цель. Создавая новый продукт важно сразу же понять и выделить основные цели, которые смогут достигнуть пользователи с помощью вашего продукта. Важна не только цель, важен и сам пользователь. Кто тот пользователь, кто хочет достигнуть определенной цели на вашем сайте? Кем он работает, какие у него хобби, он гуманитарий или технарь? Типов очень много, еще больше критериев, но не нужно выделять всех. Определите наиболее подходящую группу пользователей и оптимизируйте для них. Получайте от них советы и предложения, критику и благодарности. Определите контекст использования сайта. Где и когда ваши пользователи будут достигать своих целей, как они это будут делать? Что будет вокруг них, о чем они будут думать? Задавайте эти вопросы себе и у вас возникнет четкая картина использования сайта, приложения и т.д.

Итак, вы четко видите цели, задачи, контекст и самих пользователей и теперь смело можете задать интерфейсу ограничения или требования. Например, необходима мобильная версия, все картинки в формате svg, поддержка всех версий ie, блоки на главной страницы должны быть такие то. Вы можете выделить основные разделы и функции сайта. Что качественно повлияет на процесс разработки.

Вообщем мы справились с требованиями к проекту, в голове у нас цель определенной группы людей и мы переходим к инфраструктуре. Не стоит создавать глубокую структуру + выпадающее меню. Время — бесценно, пользователь будет искать на сайте решение своей задачи ровно столько, сколько готов потратить на нее, а это зависит от важности. Не пытайтесь впихнуть в сайт все что есть, если будет мобильная версия, то начните с нее (сразу поймете что важно, так как мало что вместится). Держите в голове цель пользователей. Старайтесь сразу решить задачу пользователя. Создавайте внутренние страницы в том случае, если функция для которой создается страница ну очень нужна (каждая функция должна доказать право на существование). Причем меню при этом должно быть упорядоченно согласно ментальной модели пользователя. В разделе апельсины не должен быть подраздел овощи.

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

Напоследок парочка правил:

1. Давайте пользователю на странице все необходимое. Все ассоциативные элементы должны быть рядом;
2. Все элементы интерфейса должны соответствовать ментальной модели пользователя. Например, все привыкли снимать и вешать картину на стене там, где она висит, а не в специально месте дома с настройками квартиры;
3. Оставляйте ориентиры — элементы или блоки, которые не меняются на разных страницах сайта;
4. Не спрашивайте пользователей, а давайте выбор. Программа или функция нужна чтобы упростить пользователю выбор, не спрашивайте у человека пятьсот вопросов до того, как давать результат. Пусть думает программа, данные вначале можно использовать более-менее общие, ну и конечно часть информации взять из cookie и т.д. Потом уже давать на выбор пользователю выбор результатов;
5. Пользователь должен представлять, что скрывается за ссылкой.

О двух правилах хочу более подробно написать. Во-первых, сообщения типа «Вы уверены?» это облегчение для разработчиков. Поясню, такого рода сообщения нужны для того, чтобы пользователь ввел корректные данные или не удалил чего то не обдуманно. Но есть решение лучше. Только задумайтесь, около 80% ваших пользователей не ошибаются, а это значит, что сообщение типа «Вы уверены?» их разозлит, особенно, когда его подряд приходиться жать много раз. Не мучайте 80% из-за невнимательности 20%. Почему же это облегчение для разработчиков, да потому, что сделать сообщение об уверенности просто, а вот функционал по возвращению старого значения в случае невнимательности сложно. Хотя второе очень круто и полезно.
Во-вторых, продукт должен вести себя как тактичный человек. это очень крутое правило позволит избежать кучи ошибок в интерфейсе, каждая функция должна доказать свою значимость и нужность. Часть из них, которая это докажет должны быть тактичными. Сами знаете эти ошибки Windows, ни хрена не понятно, разве когда вы общаетесь с людьми они отвечают так же? Нет! Задумайте над тем как реагирует функция или программа.

Помните, что люди пришли чтобы решить задачу, а не изучить новый интерфейс.

Инструменты для создания прототипов:

1. http://www.axure.com/
2. http://www.invisionapp.com/
3. http://www.mockflow.com/
4. http://www.omnigroup.com/

Ссылки на книги:

1. Сначала мобильные! (Люк Вроблевски)
2. Getting Real (37 signals)
3. Основы проектирования взаимодействия (Алан Купер)

Автор:

Источник