Проектирование сайта: что такое, из каких этапов состоит

Подпишись на наш telegram-канал

Не пропусти новые полезные статьи
и держи под рукой старые.

В статье представлены базовые принципы проектирования сайта и мобильного приложения. Определение проектирования сайта, из каких этапов состоит, сколько закладывать времени.

Этапы разработки сайта

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

1. Проектирование сайта
2. Дизайн
3. Вёрстка и программная часть
4. Наполнение контентом + тестирование
5. Запуск

В чистом виде такой процесс встречается крайне редко. Обычно несколько этапов проходят параллельно либо проект разрабатывается итерациями. Но сейчас, на самом старте можно опустить эти детали.

Что такое проектирование сайта

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

В процессе проектирования мы определяем зачем нужен сайт, как он будет решать проблемы и боли компании и её клиентов, какие в нем будут разделы и как они будут выглядеть. То есть продумываем полностью весь сайт в самом начале, «на берегу». После, уже по продуманному сценарию, садимся и спокойно разрабатываем дизайн, программную часть и наполняем контентом и тд. То есть проектирование сайта – это база, основа для дальнейшей разработки.

Пример про океан

Он не из digital, но очень наглядно отражается суть проектирования.

Представьте, что перед вами океан. Вам нужно построить подводную лодку, на которой будут передвигаться морских жители. Под водой свой огромный мир, свои правила, законы, морские обитатели. Вы в общем виде понимаете, что он из себя представляет. Но деталей, самих законов не знаете. Кто они — эти морские жители? Чего хотят, как живут, какая подводная лодка им нужна? По каким законам передвигается подводная лодка? Какой у неё должен быть вес, водоизмещения? Какой люк?

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

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

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

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

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

1. Выясняем для чего делаем сайт
2. Сбор данных
3. Исследования: метод персонажа, бенчмаркинг, юзабилити-тестирование и др.
4. Информационная архитектура сайта
5. Userflow – сценарии использования сайта
6. Прототипы интерфейса
7. Проектирование программной части
8. Техническое задание
9. Контент-план
10. Customer Journey Map (CJM)

Какие этапы обязательные, а какие нет

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

Все остальные нужны, важны, но их можно добавить/убрать в зависимости от свободного времени и бюджета проекта. Если вам сложно разобраться, то начните с выполнения только этих. Остальные добавите немного позже, когда освоите ключевые.

Зачем нужно проектирование

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

1. Мы точно сделаем тот сайт, который нужен компании

На старте проектирования вам нужно будет ответить на вопрос «Зачем нам сайт? Чего хотим добиться?» Если не знать куда мы хотим прийти, высок риск прийти не туда. И кажется, что и так все понятно. Но обычно в процессе разработки сайта цели растекаются, нужно все и сразу. И этот раздел, и этот. Или наоборот что-то забывается. И в итоге получаем сайт компании, а не решение проблем бизнеса. По-простому — слив бюджета, потеря денег, клиента, разочарование и уверенность в том, что «онлайн не работает».

2. Не придется гадать, как сделать правильно 

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

Бухгалтер хочет добавить пункт меню «Документы» и разместить там уставные и реквизиты. Потому что все контрагенты уже замучили её запросами и звонками с просьбами эти документы отправить. Коммерческий против, потому что этот пункт будет отвлекать от основного — продажи услуг. Бухгалтер работает с основания компании и влияния на директора у неё больше, чем у коммерческого. Директор соглашается, пункт меню добавляют.

Конечно, это очень глупое решение. Страницу «Документы» разместить на сайте нужно, но уж точно не в первом приоритете. Перенести в раздел «О компании», например. Но какие у вас аргументы, чтобы отказать бухгалтеру? А вот если бы вы провели исследование методом персонажа и спросили реальных клиентов, что они ожидают увидеть на сайте, вы убедили бы всех в обратном. 

3. Не придется переделывать дизайн и верстку сайта 

Это очень больно, но если вы не обсудили, что будет на каждой странице сайта на этапе разработки прототипов, то скорее всего придется всё это сделать в дизайне. И переделать часть макетов дизайна. Замучить дизайнера, себя, потратить огромное количество времени.

Ещё хуже — сверстать дизайн и потом, по-живому, в вёрстке все двигать. Тогда переделывать и дизайн, и программную часть. Сравните: поменять поля в калькуляторе услуг в ч/б картинках или на листочке, или изменить дизайн онлайн-калькулятора и программировать его снова. Уже чувствуете усталость? Плюсаните недовольство клиента, сорванные сроки и выход проекта в минус. У нас таких примеров было не много, но были. Это всегда эмоциональнотяжело. Я уж не говорю про деньги и время.

Слева прототип, справа дизайн одной и той же страницы. Что проще поправить?

Сколько времени закладывать на проектирование сайта

Краткий ответ — все зависит от сайта. У вас может быть сервис с личным кабинетом для трейдеров или лендинг по продаже печей-буржуек. Вы потратите разное время на выполнение этих задач. Вилка: от двух дней до двух месяцев.

Подробный ответ — в табличке по типам сайтов. Надеюсь, так проще ориентироваться.

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

Подведём итоги

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

• Цели, сбор данных, структура и прототипы — обязательно. Всё остальное — по желанию и бюджету.

• Определите тип сайта и заложите адекватное время и деньги на его проектирование.

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

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

Екатерина 

Титаева

Специализируется на проектировании интерфейсов сайтов и мобильных приложений.  

Поделись с друзьями

Web-проектирование | Да-Стратегия

Основные направления деятельности ИТ-Блока связаны с созданием аналитических веб-порталов, разработкой веб-сайтов, посадочных страниц (Landing Pages) и производством интерактивных публичных отчетов. В состав IT-блока входят специалисты по ведущим областям web-разработки. Так же IT-блок имеет открытую кадровую программу.

Преимущества

B2B инстументарий

Мы не просто пишем сайт, мы создаем мощный бизнес-инструмент, которым вы сможете легко управлять. У нас нет ни одного повторяющегося кейса – все наши работы разные и идеально подходят под те задачи, которые они должны решать. Правильное проектирование – вот важнейшая составляющая нашей деятельности и на этом этапе мы: 

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

Применение ведущих технологий веб-разработки

Наши разработчики не стоят на месте и имеют компетенции в последних инструментах и стандартах веб разработки. Мы знаем и используем множество инструментов: HTML5, CSS3, Bootstrap 3 и WordPress 4, PHP5, MySQL  и другие.

Сайты и landing-страницы имеют адаптивную верстку и доступны на всех современных устройствах.

Адаптивную верстку можно оценить на примере сайта «Да-Стратегия»

Динамика и обучение

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

Наши услуги

Cоздание Landing-страниц

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

Создание сайтов-визиток

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

Создание интерактивных публичных отчётов

Активный темп жизни человека, занятого делом не всегда может дать возможность изучить отчёт компании в бумажном виде. В такой ситуации на помощь приходит интерактивный публичный отчёт, который должен быть выполнен так, что бы упростить и ускорить процесс изучения информации.

 Аналитика и мероприятия

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

Календарь мероприятий

Предстоящие мероприятия

• Нет мероприятий

Что такое веб-дизайн? | IxDF

Сменить профессию не так сложно, как это часто представляется, особенно если у вас есть необходимые ресурсы, которые помогут вам измениться. Для многих веб-дизайнеров сейчас самое подходящее время переключиться на UX-дизайн. Начнем с того, что со сменой карьеры связан денежный прирост. По данным PayScale, веб-дизайнеры в США зарабатывают в среднем 46 000 долларов в год (1), а дизайнеры UX, с другой стороны, зарабатывают значительные 74 000 долларов (2). Во-вторых, возможности трудоустройства для дизайнеров UX стремительно растут: CNN сообщает, что в течение следующих 10 лет только в США будет создано 3 426 000 рабочих мест для дизайнеров UX (3). Кроме того, UX-дизайн — это значимая работа не только потому, что вы работаете над продуктом изнутри, но и потому, что, как показал DMI, UX-дизайн оказывает значительное влияние на бизнес. индекс S&P на 228%(4). Итак, где найти подходящие ресурсы, которые помогут вам изменить свою карьеру? Почему, вы читаете один прямо сейчас.

Для начала давайте кратко расскажем о том, что мы подразумеваем под «опытом пользователя». У продуктов есть пользователи, а пользовательский опыт (UX) — это просто опыт, который пользователь получает от использования этого конкретного продукта. Все идет нормально?

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

Вообще говоря, взаимодействие с пользователем можно разделить на 3 компонента: внешний вид, ощущение и удобство использования.

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

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

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

Если вы все еще не уверены, нравится ли вам UX-дизайн, у нас есть несколько статей, которые помогут представить некоторые важные аспекты UX как карьеры:

Введение в юзабилити

Юзабилити и желательность

Что такое интерактивный дизайн?

Что общего между веб-дизайном и UX-дизайном?

Название должности «Веб-дизайнер» имеет множество определений, и действительно, то, что делает веб-дизайнер, во многом зависит от того, что требуется клиенту или проекту. Некоторые веб-дизайнеры просто создают визуальный дизайн и/или высокоточные интерактивные прототипы веб-сайта, оставляя кодирование веб-сайта разработчикам внешнего и внутреннего интерфейса. Однако большинство веб-дизайнеров участвуют как в проектировании, так и в (внешней) разработке веб-сайта. Некоторые веб-дизайнеры даже регулярно проводят исследования пользователей и тестирование в рамках своей работы (и если вы один из них, вы уже почти готовы к работе в UX-дизайне).

Но какой бы ни была ваша работа веб-дизайнера, вот некоторые аспекты веб-дизайна, которые также можно найти в UX-дизайне.

Решение проблем

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

Этот итеративный процесс решения проблем похож на процесс проектирования UX (показан на изображении ниже). UX-дизайнеры начинают с исследования пользователей; очень важно познакомиться с потенциальными пользователями продукта и выяснить, в чем заключаются их проблемы, как их решить и как заставить пользователей хотеть и/или нуждаться в этом решении. Исследование пользователей часто проводится с помощью пользовательских интервью, наблюдений, демографических исследований, составления пользовательских историй и персонажей и т. д. После этого UX-дизайнеры создают дизайнерское решение, которое решает ключевые потребности пользователя, и часто возвращают прототип пользователям, чтобы проверить его достоверность. или удобство использования. После того, как продукт запущен, UX-дизайнеры собирают больше отзывов пользователей, которые переходят в новый раунд исследования пользователей, тем самым запуская процесс снова.

Если вы уже проводили исследования пользователей в рамках своей работы веб-дизайнера, вы обнаружите, что это большое преимущество при переходе на UX-дизайн. Если нет, не беспокойтесь — у вас будет много возможностей узнать, как лучше всего проводить исследования пользователей (читайте дальше, чтобы узнать больше).

Эмоциональный дизайн

При разработке веб-сайтов веб-дизайнеры часто используют типографику, цвет и макет, чтобы формировать эмоции пользователей. Чувство доверия может быть создано, например, с помощью более темных цветов и шрифтов с засечками; Точно так же можно создать ощущение веселья, используя красочные образы и игривую типографику. Веб-дизайнеры знакомы с эмоциональным дизайном; то есть создание дизайна, вызывающего эмоции у пользователей. Дизайнеры UX также заинтересованы в эмоциональном дизайне, но в более широком масштабе — они заинтересованы в том, чтобы вызывать эмоции у пользователей на протяжении всего их опыта использования продукта.

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

Междисциплинарный

Веб-дизайн — это междисциплинарная работа, где вам потребуются не только знания в области дизайна (типографика, теория цвета), но и навыки разработки веб-сайтов (HTML, CSS, JavaScript). Некоторые веб-дизайнеры также участвуют в дизайне взаимодействия, когда пишут код для анимации и взаимодействия с помощью CSS и/или JavaScript. UX-дизайн также является междисциплинарной областью, но, возможно, в этом смысле он перегружен. UX-дизайнерам необходимо использовать знания из области психологии, исследований пользователей, визуального дизайна и даже бизнеса, чтобы создать лучший UX для своих продуктов.

Различия между веб-дизайном и дизайном UX

Ориентированность на пользователя и ориентированность на технологии

Большая часть вашей работы как веб-дизайнера уходит на отслеживание последних разработок в области HTML, CSS и других языков кодирования — всех из которых меняются и улучшаются с головокружительной скоростью. Какие браузеры поддерживают какие версии CSS? Будут ли CSS-анимации работать в Safari на Mac? Даже не заводи меня в Internet Explorer! Это может быть несколько вопросов (и разочарований), которые постоянно возникают у вас как у веб-дизайнера. Но UX-дизайн не связан с 9.0055 технология . Вместо этого его внимание сосредоточено непосредственно на пользователях — технология — это только средство для пользователей, чтобы получить то, что им нужно. Только сосредоточившись на пользователях, UX-дизайнеры могут создавать решения, отвечающие их конкретным потребностям и, в конечном счете, за которые пользователи будут готовы платить. UX-дизайнеры проводят обширные исследования пользователей, чтобы узнать как можно больше о своих пользователях, большинство из которых у большинства веб-дизайнеров не было бы возможности провести.

UX — это больше, чем Интернет

UX дизайн не зависит от платформы. Его принципы и процессы применяются во многих различных областях за пределами веб-браузеров: в мобильных приложениях, программном обеспечении для настольных компьютеров и даже в аппаратных продуктах и ​​торговых площадях. С другой стороны, область веб-дизайна строго привязана к веб-браузерам. Это означает, что UX-дизайнеры могут найти работу не только в перспективных областях, таких как технологические стартапы, но и в зрелых и стабильных отраслях, таких как производители автомобилей. Пока есть продукт, есть потребность в UX — и это действительно открывает перед вами мир возможностей.

Большое преимущество опыта веб-дизайна при переходе к дизайну UX

Актуальность фона веб-дизайна

Самым большим преимуществом перехода от веб-дизайна к дизайну UX является количество совпадений между двумя областями дизайна. Хотя верно то, что дизайн UX охватывает больше платформ, чем веб-браузер, значительная часть работы по дизайну UX по-прежнему выполняется для продуктов, которые, по крайней мере, частично основаны на Интернете (подумайте о веб-сайтах социальных сетей, таких как Facebook и Twitter, веб-приложениях, таких как Dropbox, и такие сервисы, как Google). Пересечение между веб-дизайном и UX-дизайном больше, если вы провели какое-либо исследование пользователей или итеративный процесс постоянного улучшения веб-сайта с помощью пользовательских данных.

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

Эстетика

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

Во-вторых, эстетика играет жизненно важную роль в дизайне UX. Распространенный миф о UX-дизайне заключается в том, что удобство использования важнее эстетики, но это далеко не так. На самом деле исследование Стэнфордского проекта доверия с участием более 2500 участников показало, что почти половина из них оценивала доверие к веб-сайтам на основе их визуальной привлекательности (5). Это показывает, как эстетика работает рука об руку с другими факторами, такими как удобство использования, чтобы обеспечить оптимальное взаимодействие с пользователем при использовании продукта.

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

Онлайн-курсы

Фонд дизайна взаимодействия

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

У нас есть три курса (среди наших текущих предложений 32), которые специально разработаны, чтобы помочь людям войти в мир дизайна UX. Вы изучите все области UX-работы и базовые навыки для практики UX-работы в разделе «Стать UX-дизайнером с нуля». В Get Your First Job as a UX (или Interaction Designer) вы сможете узнать, какой опыт в UX больше всего ищут работодатели, а также составить выигрышное сопроводительное письмо, резюме и портфолио, которые помогут вам получить собеседование на вакансию UX-дизайнера. Наконец, в разделе «Исследования пользователей — методы и лучшие практики» вы узнаете о лучших отраслевых практиках проведения надлежащих исследований пользователей и превращении результатов ваших исследований в полезные действия над вашим продуктом.

Все остальные наши курсы по UX можно найти здесь.

Coursera

Вы также можете посетить Coursera, которая является отличным источником онлайн-обучения. Их курсы, как и наши, разрабатываются ведущими экспертами в своей области. Однако, в отличие от нас, они не специализируются на UX, и их курсы не всегда доступны, но когда они доступны, к ним можно получить доступ, как правило, за плату (за каждый курс).

Udemy

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

Курсы в классе

Nielsen Norman Group

Если вы хотите изучить курсы в классе; мы рекомендуем придерживаться «громких имен» в отрасли, которые обеспечивают надежный и высококачественный опыт обучения. Одним из таких громких имен является Nielsen Norman Group, которая также является одной из самых известных консультантов по UX; они предлагают широкий спектр обучения в классе в разных местах по всему миру. Они недешевы, но если вы предпочитаете не проходить онлайн-обучение, это хорошая альтернатива.

Вы можете найти обучение Nielsen Norman Group здесь.

General Assembly

General Assembly — еще один вариант обучения в кампусе в стиле буткемпа. У них относительно короткие и интенсивные курсы, которые регулярно повторяются. Однако они имеют высокую цену и доступны только в некоторых местах.

Подробнее о Генеральной Ассамблее можно узнать здесь.

Университетские курсы

Если у вас много денег и времени, вы можете пойти дальше и получить степень бакалавра или магистра в университете. На данный момент нет курса на получение степени «только UX», и большинство связанных степеней, как правило, сосредоточены на взаимодействии человека с компьютером.

Два примера таких программ:

Carnegie Mellon – программы HCI

York University – степень магистра в области технологий HCI траты на это. Вы должны очень тщательно взвесить все за и против университетского курса, прежде чем решите пойти по этому пути.

Например, вот как мы разбиваем общие затраты на 4-летнее университетское образование:

HSBC, по данным Top Universities, обнаружил, что среднее университетское образование в США стоит 36 564 доллара в год(6). Это включает в себя плату за обучение, а также расходы на проживание. Для 4-летней степени это составляет 146 256 долларов, и это не считая затрат (таких как проценты) на получение кредита на учебу.

Кроме того, есть возможность бросить работу и провести четыре года в университете. То есть доход, от которого вы отказываетесь, обучаясь в университете на дневном отделении. По данным переписи населения США, не имеющие высшего образования зарабатывают в среднем 27 351 доллар в год(7). За 4 года это составляет 109 404 доллара, которые можно было бы заработать, если бы вы работали.

Суммируя фактические затраты и альтернативные издержки, вы получаете общую стоимость: колоссальные 255 660 долларов!

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

Работа в сети

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

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

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

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

Наставничество и обратная связь

Мы обнаружили, что вам будет легче сменить карьеру, если вы сможете найти кого-то, кто будет вас наставлять и давать отзывы о ваших усилиях. Вы можете, конечно, найти наставника из вашей существующей профессиональной сети, если вы знаете кого-то, кто счастлив взять на себя эту роль. Если вы считаете, что это не сработает для вас, члены Лиги дизайна Interaction Design Foundation могут получить доступ к нашей сети экспертов по UX-дизайну и обратиться к наставнику из этой сети.

Вывод

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

Список литературы и где узнать больше

1. Курс: веб -дизайн для юзабилити

2. Исследования Payscale по заработной плате веб -дизайна

3. Payscale. в ближайшие 10 лет

4. Анализ инвестиций в дизайн от DMI

5. Мифы о пользовательском интерфейсе: эстетика не важна, если у вас хорошее удобство использования

6. Сколько стоит обучение в США?

7. Заработок по образованию: Бюро статистики труда США

10 принципов хорошего веб-дизайна — журнал Smashing Magazine

• 14 мин чтения
• UX,
  Веб-дизайн,
  Методические рекомендации,
  Психология,
  Удобство использования,
  UI
• Поделиться в Twitter, LinkedIn

Об авторе

Виталий Фридман любит красивый контент и не любит легко сдаваться. Когда он не пишет, он, скорее всего, занимается интерфейсом и UX…
Больше о
Виталий ↬

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

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

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

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

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

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

Что думают пользователи?

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

Большинство пользователей ищут что-то интересное (или полезное) и кликабельное; как только найдутся перспективные кандидаты, пользователи кликнут. Если новая страница не соответствует ожиданиям пользователей, нажимается кнопка «Назад» и процесс поиска продолжается.

• Пользователи ценят качество и надежность. Если страница предоставляет пользователям высококачественный контент, они готовы скомпрометировать контент рекламой и дизайном сайта. Именно по этой причине не очень хорошо спроектированные веб-сайты с высококачественным контентом набирают много трафика с годами. Контент важнее дизайна, который его поддерживает.
• Пользователи не читают, они просматривают. Анализируя веб-страницу, пользователи ищут какие-то фиксированные точки или якоря, которые бы направляли их по содержимому страницы.

  Пользователи не читают, они просматривают. Обратите внимание на резкие «горячие» области в середине предложений. Это типично для процесса сканирования.

• Интернет-пользователи нетерпеливы и требуют немедленного удовлетворения. Очень простой принцип: если веб-сайт не может оправдать ожидания пользователей, значит, дизайнер не выполнил свою работу должным образом, и компания теряет деньги. Чем выше когнитивная нагрузка и чем менее интуитивно понятна навигация, тем охотнее пользователи покидают сайт и ищут альтернативы. [ЮН / ДВУ]
• Пользователи не делают оптимальный выбор. Пользователи не ищут самый быстрый способ найти нужную им информацию. Они также не сканируют веб-страницу линейно, последовательно переходя от одного раздела сайта к другому. Вместо этого пользователи удовлетворяются; они выбирают первый разумный вариант. Как только они находят ссылку, которая, кажется, может вести к цели, есть очень большая вероятность, что по ней сразу же щелкнут. Оптимизировать сложно и долго. Удовлетворение более эффективно. [видео]

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

• Пользователи следуют своей интуиции. В большинстве случаев пользователи путаются, а не читают информацию, предоставленную дизайнером. По словам Стива Круга, основная причина этого в том, что пользователям все равно. «Если мы находим что-то, что работает, мы придерживаемся этого. Для нас не имеет значения, понимаем ли мы, как вещи работают, если мы можем их использовать. Если ваша аудитория будет вести себя так, как будто вы занимаетесь дизайном рекламного щита, создавайте отличные рекламные щиты».
• Пользователи хотят иметь контроль. Пользователи хотят иметь возможность управлять своим браузером и полагаться на единообразное представление данных на всем сайте. Например. они не хотят, чтобы новые окна появлялись неожиданно, и они хотят иметь возможность вернуться с помощью кнопки «Назад» на сайт, на котором они были раньше: поэтому рекомендуется никогда не открывать ссылки в новых окнах браузера .

1. Не заставляйте пользователей думать

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

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

Давайте рассмотрим пример. Beyondis.co.uk утверждает, что находится «за пределами каналов, продуктов и дистрибуции». Что означает ? Поскольку пользователи обычно просматривают веб-сайты в соответствии с шаблоном «F», эти три утверждения будут первыми элементами, которые пользователи увидят на странице после ее загрузки.

Хотя сам дизайн прост и интуитивно понятен, чтобы понять, о чем страница, пользователю нужно искать ответ. Вот что такое ненужный вопросительный знак есть. Задача дизайнера — сделать так, чтобы количество вопросительных знаков было близко к 0. Визуальное пояснение размещено справа. Простой обмен обоими блоками повысит удобство использования.

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

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

2. Не растрачивайте терпение пользователей

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

Как заявляет Райан Сингер, разработчик команды 37Signals, пользователи, вероятно, захотят предоставить адрес электронной почты, если их попросят после того, как они увидели, что функция работает, поэтому они имели некоторое представление о том, что им нужно. собирались получить взамен.

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

Очевидно, Клещу нужно больше. Однако регистрацию можно пройти менее чем за 30 секунд — поскольку форма имеет горизонтальную ориентацию, пользователю даже не нужно прокручивать страницу.

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

3. Управляйте вниманием пользователей

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

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

Humanized отлично использует принцип фокусировки. Единственный элемент, который непосредственно виден пользователям, — это слово «бесплатно», которое кажется привлекательным и привлекательным, но при этом спокойным и чисто информативным. Тонкие подсказки предоставляют пользователям достаточно информации о том, как узнать больше о «бесплатном» продукте.

Сосредоточение внимания пользователей на определенных областях сайта с умеренным использованием визуальных элементов может помочь вашим посетителям добраться из точки А в точку Б, не задумываясь о том, как это должно быть сделано на самом деле. Чем меньше вопросительных знаков у посетителей, тем лучше они ориентируются и тем больше доверия они могут развить к компании, которую представляет сайт. Другими словами: чем меньше мыслей должно происходить за кулисами, тем лучше пользовательский опыт, который в первую очередь является целью удобства использования.

4. Стремитесь к раскрытию функций

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

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

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

5. Используйте эффективное письмо

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

Деловые разговоры. Избегайте симпатичных или остроумных названий, маркетинговых названий, названий, характерных для компании, и незнакомых технических названий. Например, если вы описываете услугу и хотите, чтобы пользователи создали учетную запись, лучше «зарегистрироваться», чем «начать сейчас!» что опять же лучше, чем «изучить наши услуги».

Eleven2.com сразу переходит к делу. Никаких милых слов, никаких преувеличенных заявлений. Вместо этого цена: именно то, что ищут посетители.

Оптимальное решение для эффективного письма —

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

6. Стремитесь к простоте

Принцип «будь проще» (KIS) должен быть главной целью дизайна сайта. Пользователи редко бывают на сайте, чтобы насладиться дизайном; кроме того, в большинстве случаев они ищут информацию несмотря на дизайн. Стремитесь к простоте, а не к сложности.

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

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

7. Не бойтесь белого пространства

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

Сложные структуры труднее читать, сканировать, анализировать и работать с ними. Если у вас есть выбор между разделением двух сегментов дизайна видимой линией или некоторым пробелом, обычно лучше использовать решение с пробелами. Иерархические структуры уменьшают сложность (Закон Саймона): чем лучше вам удастся дать пользователям ощущение визуальной иерархии, тем легче будет восприниматься ваш контент.

Пустое пространство — это хорошо. Cameron.io использует пустое пространство в качестве основного элемента дизайна. Результатом является хорошо сканируемый макет, который дает контенту доминирующее положение, которого он заслуживает.

8. Эффективно общайтесь с помощью «видимого языка»

В своих статьях об эффективной визуальной коммуникации Аарон Маркус формулирует три основных принципа использования так называемого «видимого языка» — контента, который пользователи видят на экран.

• Организовать : предоставить пользователю четкую и последовательную концептуальную структуру. Непротиворечивость, компоновка экрана, взаимосвязи и навигация — важные концепции организации. Одни и те же соглашения и правила должны применяться ко всем элементам.
• Экономия : делайте все возможное с наименьшим количеством подсказок и визуальных элементов. Следует учитывать четыре основных момента: простота, ясность, отличительность и акцент. Простота включает в себя только те элементы, которые наиболее важны для коммуникации. Ясность : все компоненты должны быть спроектированы таким образом, чтобы их значение не было двусмысленным. Отличительность : важные свойства необходимых элементов должны быть различимы. Акцент : наиболее важные элементы должны легко восприниматься.
• Общение : сопоставьте презентацию с возможностями пользователя. Пользовательский интерфейс должен поддерживать баланс между разборчивостью, удобочитаемостью, типографикой, символикой, несколькими представлениями, а также цветом или текстурой для успешного общения. Используйте макс. 3 начертания максимум 3 кегля размером — максимум 18 слов или 50-80 символов на строку текста.

9. Конвенции — наши друзья

Традиционный дизайн элементов сайта не делает сайт скучным. На самом деле соглашения очень полезны, поскольку они уменьшают кривую обучения, необходимость выяснять, как все работает. Например, было бы кошмаром с точки зрения юзабилити, если бы все веб-сайты имели различное визуальное представление RSS-каналов. Это не так уж отличается от нашей обычной жизни, когда мы склонны привыкать к основным принципам организации данных (папок) или совершения покупок (размещение товаров).

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

Типичным примером сеансов юзабилити является перевод страницы на японский язык (при условии, что ваши веб-пользователи не знают японский язык , например, с Babelfish) и дайте юзабилити-тестерам задание найти что-то на странице на другом языке. Если соглашения правильно применяются, пользователи смогут достичь не слишком конкретной цели, даже если они не понимают ни слова.

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

10. Тестируйте раньше, тестируйте часто

Этот так называемый принцип TETO следует применять к каждому проекту веб-дизайна, поскольку тесты удобства использования часто дают важные сведения о существенных проблемах и проблемах, связанных с данным макетом.

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

Несколько важных моментов, о которых следует помнить:

• по словам Стива Круга, тестирование одного пользователя на 100% лучше, чем отсутствие тестирования , а тестирование одного пользователя в начале проекта лучше, чем тестирование 50 ближе к концу. Согласно первому закону Бема, ошибки чаще всего возникают при разработке требований и проектировании, и чем позже они устраняются, тем дороже они обходятся.
• тестирование является итеративным процессом . Это означает, что вы что-то проектируете, тестируете, исправляете и снова тестируете. Могут быть проблемы, которые не были обнаружены в ходе первого раунда, так как пользователи были практически заблокированы другими проблемами.
• юзабилити-тесты всегда дают полезные результаты . Либо вам укажут на проблемы, которые у вас есть, либо вам укажут на отсутствие серьезных недостатков дизайна, что в обоих случаях является полезной информацией для вашего проекта.