Основы проектирования интерфейсов: становимся специалистами, не выходя из дома!

Основы проектирования интерфейсов: становимся специалистами, не выходя из дома!

От автора: привет, друзья! Сегодня, в эпоху интернета, хочу рассказать вам про основы проектирования интерфейсов. «Фу, что за скучная тема, кому это может понадобиться?», — подумаете вы. Поэтому сразу попытаюсь обосновать свой выбор. Практически каждый пользователь Всемирной сети, попадая на любой интернет-ресурс, первым делом обращает внимание на комфорт и удобство пребывания на сайте. Не знаю конечно, как вы, но я безумно придирчив к навигации, и в случае если за пару-тройку секунд не вижу в поле зрения необходимые функции, то без капли сомнения покидаю этот сайт и перехожу к следующему. Именно поэтому, если вы имеете собственный интернет-проект, рекомендую особое внимание уделить проектированию интерфейсов. Это поможет вам сохранить существующих клиентов и не потерять потенциальных.

Что такое интерфейс, и зачем он нужен?

Когда речь идет об основах проектирования интерфейсов, в первую очередь, упоминается термин HCI, что в переводе с английского языка означает «взаимодействие пользователя (человека) и компьютера». Пользовательский интерфейс — это коммуникативный канал, по которому происходит взаимодействие человека и компьютера.

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

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

Если обобщить труды западных исследователей и разработчиков HCI, то можно выделить три основных правила проектирования интерфейсов:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

программа обязана помогать в решении задачи, а не становиться ей;

в процессе работы с программой юзер не должен чувствовать себя глупым;

программа должна функционировать так, чтобы юзер не считал компьютер глупым.

Законы проектирования интерфейсов

Разработка интерфейсов в процессе проектирования больших сайтов — это один из самых важных и объемных этапов. Поэтому я хочу отдельно рассказать вам про законы и принципы разработки интерфейсов.

Простота. Пользователю должно быть понятно и просто пользоваться продуктом, каждая задача должна решаться как можно меньшим числом кликов. Избегайте сложных действий, заставляющих юзеров думать;

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

соответствие сигнал / шум. В любом HCI есть сигналы (важные элементы) и шумы (бессмысленные маловажные элементы). Конечно же, концентрироваться необходимо на сигналах, а шума — избегать;

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

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

краткость — сестра таланта. Зарубите себе на носу, большинство людей не любит читать гигантские массивы текста, они их всего лишь просматривают;

умное заимствование. Этот принцип гласит: «Не изобретайте велосипед для стандартных вещей»;

принцип группировки. Разбивайте информацию на странице на логические группы, чтобы юзер мог быстро сориентироваться в программе;

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

интуитивная понятность;

однородность. Очень часто в больших проектах можно встретить однородный функционал (например, комментарии), расположенный в разных частях сайта, он не должен отличаться. Такое правило применимо и к стилю;

все необходимое на виду. Все самые полезные и важные элементы HCI должны располагаться на виду и быть выделены соответствующим образом;

правило 3-х кликов. Переход из раздела в раздел должен происходить не более чем 3 кликами. Этот же принцип относится к главной странице: пользователь должен иметь возможность получить всю важную информацию, сделав максимум 3 клика;

принцип мостовых перил. Пользователи должны быть защищены от случайных действий;

принцип единства. Элементы управления и настройки необходимо располагать в одном месте, а не прятать в разные разделы;

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

Как стать проектировщиком интерфейсов?

В западных странах HCI — это востребованная профессия, которой обучают в университетах. В России, увы, она пока не обрела такую популярность, поэтому обучение проектированию интерфейсов можно пройти либо на дому с помощью видеоуроков, либо на курсах.

Заинтересовались профессией, но у вас нет денег на посещение курсов по проектированию интерфейсов? Не расстраивайтесь и не опускайте руки! Вот вам небольшой перечень базовых навыков, которыми нужно овладеть (старайтесь осваивать их именно в предложенной мной последовательности):

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

верстка. Посмотрите видеоуроки по верстке, чтобы разобраться с основами языка гипертекстовой разметки. Также это позволит увидеть все технические сложности, которые приходится одолевать, верстая чужие макеты;

веб-дизайн. Ознакомьтесь с типографикой, композицией и цветами. Постарайтесь овладеть основным инструментарием веб-дизайнеров;

программирование. Изучите основы программирования: принципы объектно-ориентированного программирования, базовый синтез, массивы, циклы и матрицы. Научитесь работать с базами данных и разберитесь в ключевых особенностях разных языков программирования;

СЕО-оптимизация. Любому специалисту, работающему во Всемирной паутине, просто необходимо разбираться в поисковых системах и понимать, как они работают; знать, что такое мета-данные и прочие СЕО-понятия;

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

Может показаться, что большинство из этих навыков вам никогда не пригодятся. Но я настоятельно советую, не ленитесь и никогда не останавливайтесь на достигнутом. Чтобы стать высококлассным специалистом, нужно постоянно развиваться, читать специализированную литературу (Норман Д. «Дизайн привычных вещей», Алан Купер «Об интерфейсе. Основы проектирования взаимодействия», Тидвелл Дж. «Разработка пользовательских интерфейсов») и повышать свою квалификацию. Любая компания с большим удовольствием примет на работу специалиста, идущего нога в ногу с прогрессом.

Друзья, если вам была полезна моя статья — подписывайтесь и делитесь с товарищами! Не жадничайте :) До новых встреч на страницах этого блога!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика монетизации блога: от раскрутки до реальных денег

Пошаговая система по созданию, раскрутки и монетизации блога.

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree