G
Gustav
Команда форума
Администратор
- Сообщения
- 26.406
- Лайки
- 51.217
Юзабилити: как сделать сайт, которым удобно пользоваться
Главная цель сайта - дать пользователю возможность быстро и эффективно найти нужную информацию или произвести нужное действие (например, сделать покупку). Из этого следует, что суть качественного веб-дизайна сводится к тому, чтобы гармонично сочетать визуальное оформление сайта с его функциональностью. Помни, в конечном итоге удобство использования является одним из решающих факторов, которые определяют, будет ли твой сайт успешным и конкурентоспособным. Чтобы создать по-настоящему качественный дизайн, рекомендуем воспользоваться методами, которые в самом начале помогут тебе заложить прочный “фундамент” сайта, а затем позволят протестировать и оценить то, что получилось.
Прототипирование
Первый шаг - это проектирование будущего дизайна сайта. На этой стадии ты должен ответить себе на вопрос: как будет выглядеть твой сайт и какие действия на нем можно будет выполнять?
Качественный и удобный дизайн проще всего продумывать еще на стадии разработки - ошибки, допущенные на ранних стадиях создания сайта, сложнее всего (и, соответственно, дороже) исправить. Чтобы свести к минимуму число будущих исправлений, нужно уделить должное внимание проектированию сайта, т.е. описанию его цели, функциональных возможностей и дизайна. Цель в первую очередь перекликается с тем, для какой аудитории (т.е. группы людей, обладающей схожими характеристиками) предназначен данный сайт. Чтобы определить цель, нужно ответить себе на вопрос: зачем и для кого я создаю этот сайт? Чтобы определиться с функциональностью, нужно продумать, какие действия посетители захотят произвести на сайте - иными словами, как сайт будет работать, и как будет организовано его взаимодействие с пользователем. Что же касается дизайна, метод, который часто используется на начальных стадиях его разработки, называется прототипированием - этот способ, как понятно из термина, заключается в создании графического прототипа, то есть схемы дизайна сайта (зачастую упрощенной). По сути это просто изображение того, как должен будет выглядеть будущий сайт, созданное в графическом редакторе (InDesign, Photoshop, Illustrator и т.д) или в специальном приложении для прототипирования, например,
Axure RP Pro позвляет создать прототип сайта в визуальном режиме, а затем скачать его в формате HTML, чтобы просмотреть в браузере. При этом можно получить достаточно детальные и качественные прототипы, которые в последствии можно удобно использовать для разработки дизайна. Balsamiq Mockups также предоставляет пользователям возможность создать графический прототип сайта, но политика этого средства прототипирования несколько отличается от Axure RP Pro. Balsamiq Mockups делает акцент именно на скорость создания прототипов, не уделяя большого внимания проработке деталей - поэтому с помощью Balsamiq Mockups особенно удобно быстро создавать наброски страниц будущего сайта. Для сравнения также нужно заметить, что Balsamiq Mockups намного дешевле, чем Axure RP Pro. Использование первого обойдется в 79 долларов, в то время как Axure RP Pro стоит от $289 до $589 (в зависимости от выбранной лицензии).
Имея такое готовое изображение или набросок, разработчики могут быстрее и проще сверстать сайт (то есть написать его HTML и CSS-код) так, чтобы открывающаяся в браузере страница выглядела так же, как ее графический прототип. Здесь действительно уместен принцип “лучше один раз увидеть, чем сто раз услышать”.
Кроссбраузерность
Итак, основа будущего дизайна положена. Однако прежде, чем дизайн будет готов, на твоем пути встанет еще несколько задач, от успешного решения которых зависит качество и удобство использования твоего сайта.
Допустим, у нас есть макет будущего сайта, и остается только его сверстать, т.е. перевести в код, понятный браузеру. Однако здесь мы сталкиваемся с важной проблемой: интернет-пользователи могут использовать различные браузеры для просмотра твоего сайта - Chrome, Firefox, Internet Explorer, Opera, Safari или даже что-то более экзотичное вроде SeaMonkey. Скорее всего в каждом из этих браузеров сайт будет выглядеть немного по разному из-за отличающихся алгоритмов обработки HTML-кода и каскадных таблиц стилей CSS. Иногда даже небольшого искажения достаточно, чтобы испортить задуманный дизайн или даже сделать сайт неудобным в использовании - поэтому лучше сразу проверить, как твой сайт выглядит в разных браузерах. Для этого можно, конечно, установить у себя на компьютере версии всех наиболее популярных браузеров или найти такие компьютеры, на которых они установлены - однако есть способ более быстро и эффективно справиться с задачей. Для тестирования кроссбраузерности сайта существуют различные специализированные программы; одна из таких программ, которая пользуется большой популярностью - это
Чтобы провести тестирование, достаточно ввести в программу адрес сайта и выбрать интересующие параметры тестирования - в каких сайтах или системах нужно проверить сайт. Затем программа сообщит, сколько времени придется ждать результат.
Премиум пользователи получают готовые скриншоты сайта в течение всего нескольких минут, простым пользователям придется подождать чуть дольше, но в итоге и те и другие получат .zip архив со скриншотами сайта в различных браузерах.
Еще один полезный сервис для тестирования кроссбраузерности сайтов -
Адаптивный дизайн
Тот факт, что люди используют различные браузеры - далеко не единственная проблема современного веб-дизайна. Еще один камень преткновения - размер экрана. Так как посетители твоего сайта будут использовать различные устройства - настольные компьютеры, лаптопы, планшеты или смартфоны - некоторым из них возможно придется прокручивать экран вбок, т.к. размер страницы не укладывается в размер экрана или, например, будет трудно нажать на ссылку, потому что она слишком мала на экране мобильного телефона. Чтобы избежать такого рода неудобств, существует метод создания “тянущегося” или “резинового” сайта, который сам подстраивается под размеры окна браузера. Это называется адаптивный или “отзывчивый” веб-дизайн (от англ. responsive design). Когда сайт “растягивается” по размеру окна, его становится удобно просматривать как с ноутбука, так и с планшета или смартфона. Поскольку продолжает расти число людей, которые предпочитают использовать мобильные устройства для выхода в интернет, в последнее время адаптивный дизайн обрел большую популярность. Можно сказать, что адаптивный принцип начинает вытеснять отдельные мобильные версии сайтов, создание и содержание которых сопряжено с большими затратами времени и ресурсов.
Выяснить, правильно ли работает сайт на разных видах устройств, можно с помощью кроссплатформенного тестирования. Как и в случае с кроссбраузерным тестированием, эту проверку можно быстро и эффективно осуществить с помощью различных онлайн-сервисов, таких как вышеупомянутые Browsershots и BrowserStack или узкоспециализированных инструментов вроде
Юзабилити-тестирование и оценка результатов
Неудобная навигация, неудачное расположение различных элементов страницы, слишком большая загруженность сайта графикой или рекламой - все эти ошибки можно выявить, если провести юзабилити-тестирование. Такая проверка включает в себя:
1. Визуальный анализ - оценку того, рационально ли расположены текстовые блоки и другие элементы и сколько места они занимают;
2. Моделирование поведения пользователя - проверку путей, по которым он может пойти, выполняя какое-либо из возможных действий на сайте.
3. Анализ пути конверсии - насколько удобно пользователю совершать
Суть юзабилити-тестирования в том, чтобы сделать навигацию сайта понятней, дизайн - практичней, жизнь посетителей сайта - проще, а конверсии и продажи, соответственно - выше.
Существуют компании, которые занимаются юзабилити-тестированием и могут предоставить профессиональную оценку сайта, а также рекоммендации для улучшения его работы. Но есть также много бесплатных альтернатив, таких как, например, сервис
Яндекс.Метрика - это полностью бесплатный инструмент, с помощью которого можно оценить юзабилити своего сайта, основываясь на результатах статистического тестирования. Яндекс.Метрика фиксирует количество кликов в разных частях сайта и на основе этих данных составляет карту кликов, которая показывает, какие разделы пользователям более всего интересны, а куда они почти никогда не заходят. Одна из разновидностей карты кликов - это т.н. тепловая карта, на которой разными цветами показана интенсивность, с которой пользователи кликали по тем или иным элементам.
Имея такую информацию, можно искать причины проблемы - контент малопосещаемого раздела пользователям неинтересен или они просто не могут его найти, т.е. нужно решать проблему с навигацией сайта? Почему они провели на одной странице относительно много времени - что-то на этой странице вызвало у них интерес или они просто долго не могли разобраться, как найти нужную информацию? Исследование статистики может сказать многое о поведении пользователей на сайте и, как следствие, позволит дать оценку его юзабилити.
В свою очередь, UsabilityHub использует три инструмента для тестирования, которые называются Fivesecondtest, ClickTest и NavFlow.
Путь к сердцу пользователя
Создание качественного дизайна сайта - это довольно сложный процесс, который состоит из проб и ошибок, из анализа результатов и внесения корректировок. Возможно, на этапе прототипирования ты не сможешь предугадать все особенности поведения пользователей, но учти, что прототипирование - это только первый этап. В процессе работы тебе еще придется позаботиться о том, чтобы твоим сайтом было удобно пользоваться, просматривая его на любом устройстве и в любом браузере. Затем, проведя юзабилити-тестирование, ты сможешь выявить проблемные места, которые потребуют дополнительного внимания. К счастью, сейчас все эти этапы значительно упрощаются благодаря различным сервисам разработки и тестирования сайтов.
Помни, если ты уделишь должное время и приложишь усилие, чтобы сделать свой сайт максимально удобным и эффективным, это обязательно скажется на поведении пользователей - они будут больше доверять твоему ресурсу, с большей вероятностью купят твои продукты или услуги, а также будут чаще возвращаться на твой сайт и становиться постоянными пользователями.
Главная цель сайта - дать пользователю возможность быстро и эффективно найти нужную информацию или произвести нужное действие (например, сделать покупку). Из этого следует, что суть качественного веб-дизайна сводится к тому, чтобы гармонично сочетать визуальное оформление сайта с его функциональностью. Помни, в конечном итоге удобство использования является одним из решающих факторов, которые определяют, будет ли твой сайт успешным и конкурентоспособным. Чтобы создать по-настоящему качественный дизайн, рекомендуем воспользоваться методами, которые в самом начале помогут тебе заложить прочный “фундамент” сайта, а затем позволят протестировать и оценить то, что получилось.
Прототипирование
Первый шаг - это проектирование будущего дизайна сайта. На этой стадии ты должен ответить себе на вопрос: как будет выглядеть твой сайт и какие действия на нем можно будет выполнять?
Качественный и удобный дизайн проще всего продумывать еще на стадии разработки - ошибки, допущенные на ранних стадиях создания сайта, сложнее всего (и, соответственно, дороже) исправить. Чтобы свести к минимуму число будущих исправлений, нужно уделить должное внимание проектированию сайта, т.е. описанию его цели, функциональных возможностей и дизайна. Цель в первую очередь перекликается с тем, для какой аудитории (т.е. группы людей, обладающей схожими характеристиками) предназначен данный сайт. Чтобы определить цель, нужно ответить себе на вопрос: зачем и для кого я создаю этот сайт? Чтобы определиться с функциональностью, нужно продумать, какие действия посетители захотят произвести на сайте - иными словами, как сайт будет работать, и как будет организовано его взаимодействие с пользователем. Что же касается дизайна, метод, который часто используется на начальных стадиях его разработки, называется прототипированием - этот способ, как понятно из термина, заключается в создании графического прототипа, то есть схемы дизайна сайта (зачастую упрощенной). По сути это просто изображение того, как должен будет выглядеть будущий сайт, созданное в графическом редакторе (InDesign, Photoshop, Illustrator и т.д) или в специальном приложении для прототипирования, например,
Вам необходимо зрегистрироваться для просмотра ссылок
или
Вам необходимо зрегистрироваться для просмотра ссылок
.Axure RP Pro позвляет создать прототип сайта в визуальном режиме, а затем скачать его в формате HTML, чтобы просмотреть в браузере. При этом можно получить достаточно детальные и качественные прототипы, которые в последствии можно удобно использовать для разработки дизайна. Balsamiq Mockups также предоставляет пользователям возможность создать графический прототип сайта, но политика этого средства прототипирования несколько отличается от Axure RP Pro. Balsamiq Mockups делает акцент именно на скорость создания прототипов, не уделяя большого внимания проработке деталей - поэтому с помощью Balsamiq Mockups особенно удобно быстро создавать наброски страниц будущего сайта. Для сравнения также нужно заметить, что Balsamiq Mockups намного дешевле, чем Axure RP Pro. Использование первого обойдется в 79 долларов, в то время как Axure RP Pro стоит от $289 до $589 (в зависимости от выбранной лицензии).
Имея такое готовое изображение или набросок, разработчики могут быстрее и проще сверстать сайт (то есть написать его HTML и CSS-код) так, чтобы открывающаяся в браузере страница выглядела так же, как ее графический прототип. Здесь действительно уместен принцип “лучше один раз увидеть, чем сто раз услышать”.
Кроссбраузерность
Итак, основа будущего дизайна положена. Однако прежде, чем дизайн будет готов, на твоем пути встанет еще несколько задач, от успешного решения которых зависит качество и удобство использования твоего сайта.
Допустим, у нас есть макет будущего сайта, и остается только его сверстать, т.е. перевести в код, понятный браузеру. Однако здесь мы сталкиваемся с важной проблемой: интернет-пользователи могут использовать различные браузеры для просмотра твоего сайта - Chrome, Firefox, Internet Explorer, Opera, Safari или даже что-то более экзотичное вроде SeaMonkey. Скорее всего в каждом из этих браузеров сайт будет выглядеть немного по разному из-за отличающихся алгоритмов обработки HTML-кода и каскадных таблиц стилей CSS. Иногда даже небольшого искажения достаточно, чтобы испортить задуманный дизайн или даже сделать сайт неудобным в использовании - поэтому лучше сразу проверить, как твой сайт выглядит в разных браузерах. Для этого можно, конечно, установить у себя на компьютере версии всех наиболее популярных браузеров или найти такие компьютеры, на которых они установлены - однако есть способ более быстро и эффективно справиться с задачей. Для тестирования кроссбраузерности сайта существуют различные специализированные программы; одна из таких программ, которая пользуется большой популярностью - это
Вам необходимо зрегистрироваться для просмотра ссылок
, бесплатный ресурс, позволяющий протестировать сайт в разных браузерах, используя различные операционные системы - Windows, Linux или Mac.Чтобы провести тестирование, достаточно ввести в программу адрес сайта и выбрать интересующие параметры тестирования - в каких сайтах или системах нужно проверить сайт. Затем программа сообщит, сколько времени придется ждать результат.
Премиум пользователи получают готовые скриншоты сайта в течение всего нескольких минут, простым пользователям придется подождать чуть дольше, но в итоге и те и другие получат .zip архив со скриншотами сайта в различных браузерах.
Еще один полезный сервис для тестирования кроссбраузерности сайтов -
Вам необходимо зрегистрироваться для просмотра ссылок
. С помощью данного ресурса можно протестровать сайт в различных браузерах, операционных системах и на разных устройствах в режиме реального времени - BrowserStack использует виртуальные машины, расположенные в облаке, таким образом давая пользователю возможность открывать браузеры в браузере. Преимущество BrowserStack в том, что этот сервис позволяет проводить тестирование как с помощью скриншотов, так и напрямую, открывая страницы в разных браузерах, что позволяет не только визуально оценить, правильно ли открываются страницы, но и заглянуть глубже, проверить корректно ли работают все ссылки, текстовые поля и другие элементы, которые невозможно проверить с помощью скриншотов. Более того, в случае, если были выявлены проблемы, можно провести отладку работы JavaScript, CSS, Flash или Ajax прямо в BrowserStack.Адаптивный дизайн
Тот факт, что люди используют различные браузеры - далеко не единственная проблема современного веб-дизайна. Еще один камень преткновения - размер экрана. Так как посетители твоего сайта будут использовать различные устройства - настольные компьютеры, лаптопы, планшеты или смартфоны - некоторым из них возможно придется прокручивать экран вбок, т.к. размер страницы не укладывается в размер экрана или, например, будет трудно нажать на ссылку, потому что она слишком мала на экране мобильного телефона. Чтобы избежать такого рода неудобств, существует метод создания “тянущегося” или “резинового” сайта, который сам подстраивается под размеры окна браузера. Это называется адаптивный или “отзывчивый” веб-дизайн (от англ. responsive design). Когда сайт “растягивается” по размеру окна, его становится удобно просматривать как с ноутбука, так и с планшета или смартфона. Поскольку продолжает расти число людей, которые предпочитают использовать мобильные устройства для выхода в интернет, в последнее время адаптивный дизайн обрел большую популярность. Можно сказать, что адаптивный принцип начинает вытеснять отдельные мобильные версии сайтов, создание и содержание которых сопряжено с большими затратами времени и ресурсов.
Выяснить, правильно ли работает сайт на разных видах устройств, можно с помощью кроссплатформенного тестирования. Как и в случае с кроссбраузерным тестированием, эту проверку можно быстро и эффективно осуществить с помощью различных онлайн-сервисов, таких как вышеупомянутые Browsershots и BrowserStack или узкоспециализированных инструментов вроде
Вам необходимо зрегистрироваться для просмотра ссылок
или
Вам необходимо зрегистрироваться для просмотра ссылок
.Юзабилити-тестирование и оценка результатов
Неудобная навигация, неудачное расположение различных элементов страницы, слишком большая загруженность сайта графикой или рекламой - все эти ошибки можно выявить, если провести юзабилити-тестирование. Такая проверка включает в себя:
1. Визуальный анализ - оценку того, рационально ли расположены текстовые блоки и другие элементы и сколько места они занимают;
2. Моделирование поведения пользователя - проверку путей, по которым он может пойти, выполняя какое-либо из возможных действий на сайте.
3. Анализ пути конверсии - насколько удобно пользователю совершать
Вам необходимо зрегистрироваться для просмотра ссылок
на сайте.Суть юзабилити-тестирования в том, чтобы сделать навигацию сайта понятней, дизайн - практичней, жизнь посетителей сайта - проще, а конверсии и продажи, соответственно - выше.
Существуют компании, которые занимаются юзабилити-тестированием и могут предоставить профессиональную оценку сайта, а также рекоммендации для улучшения его работы. Но есть также много бесплатных альтернатив, таких как, например, сервис
Вам необходимо зрегистрироваться для просмотра ссылок
, который для исследования юзабилити использует статистический анализ, или онлайн сервис
Вам необходимо зрегистрироваться для просмотра ссылок
, который выдает результаты тестирования с помощью анализа скриншотов сайта.Яндекс.Метрика - это полностью бесплатный инструмент, с помощью которого можно оценить юзабилити своего сайта, основываясь на результатах статистического тестирования. Яндекс.Метрика фиксирует количество кликов в разных частях сайта и на основе этих данных составляет карту кликов, которая показывает, какие разделы пользователям более всего интересны, а куда они почти никогда не заходят. Одна из разновидностей карты кликов - это т.н. тепловая карта, на которой разными цветами показана интенсивность, с которой пользователи кликали по тем или иным элементам.
Имея такую информацию, можно искать причины проблемы - контент малопосещаемого раздела пользователям неинтересен или они просто не могут его найти, т.е. нужно решать проблему с навигацией сайта? Почему они провели на одной странице относительно много времени - что-то на этой странице вызвало у них интерес или они просто долго не могли разобраться, как найти нужную информацию? Исследование статистики может сказать многое о поведении пользователей на сайте и, как следствие, позволит дать оценку его юзабилити.
В свою очередь, UsabilityHub использует три инструмента для тестирования, которые называются Fivesecondtest, ClickTest и NavFlow.
- Fivesecondtest позволяет проанализировать дизайн на основе анкетирования пользователей. Чтобы протестировать страницу, нужно загрузить ее скриншот, написать к нему короткое описание, чтобы пользователи имели большее представление о проекте, и выбрать 5 вопросов, на которые они должны будут ответить после просмотра страницы длительностью в 5 секунд.
- ClickTest создает тепловую карту сайта, обозначая разными цветами интенсивность, с которой пользователи кликают по различным объектам. Если тебя особенно интересует создание тепловой карты, можно воспользоваться сервисом
Вам необходимо зрегистрироваться для просмотра ссылок, который специализируется на создании таких карт.
- NavFlow анализирует то, насколько интерфейс понятен пользователям, насколько просто в нем ориентироваться. Этот инструмент использует тестирование кликов, чтобы определить туннель или маршрут, по которому пользователи переходят из одного места сайта в другое, и ищет проблемные участки на этом пути.
Путь к сердцу пользователя
Создание качественного дизайна сайта - это довольно сложный процесс, который состоит из проб и ошибок, из анализа результатов и внесения корректировок. Возможно, на этапе прототипирования ты не сможешь предугадать все особенности поведения пользователей, но учти, что прототипирование - это только первый этап. В процессе работы тебе еще придется позаботиться о том, чтобы твоим сайтом было удобно пользоваться, просматривая его на любом устройстве и в любом браузере. Затем, проведя юзабилити-тестирование, ты сможешь выявить проблемные места, которые потребуют дополнительного внимания. К счастью, сейчас все эти этапы значительно упрощаются благодаря различным сервисам разработки и тестирования сайтов.
Помни, если ты уделишь должное время и приложишь усилие, чтобы сделать свой сайт максимально удобным и эффективным, это обязательно скажется на поведении пользователей - они будут больше доверять твоему ресурсу, с большей вероятностью купят твои продукты или услуги, а также будут чаще возвращаться на твой сайт и становиться постоянными пользователями.
