как создать сайт, который принесет клиентов — статьи на Skillbox
Параметр, который характеризует качество дизайна и контента на сайте, называется юзабилити.
Постоянная работа над юзабилити — важная часть ведения бизнеса. Знание основных законов и принципов юзабилити помогает удержать пользователя на сайте. Чем дольше посетитель изучает страницу, тем выше вероятность, что он оставит заявку, закажет товар или зарегистрируется.
Английское слово usability в переводе означает «возможность использования». Этим термином описывают уровень сложности интерфейса любой информационной системы — сайта, программы, приложения.
Характеризуется простотой использования, легкостью освоения и доступностью интерфейса. Показывает, достигнет ли посетитель своей цели на сайте.
Чтобы объяснить, что такое юзабилити, простыми словами, нужно сказать не только про уровень сложности интерфейса, но и про методы его улучшения.
Знание этих методов помогают сделать сайт удобным для посетителя.
Прежде чем улучшать сайт, нужно определиться, как измерить уровень юзабилити и какое значение будет оптимальным.
Уровень юзабилити — не абстрактная величина, он имеет единицу измерения, которая определена в международном стандарте ISO 9241-210. Характеризуется количеством физических и умственных усилий, которые тратят пользователи на достижение своей цели, и называется стоимостью взаимодействия.
Стоимость взаимодействия считают низкой, если пользователь практически не прикладывает усилий для получения нужного результата.
Дизайнеры стремятся снизить стоимость взаимодействия настолько, насколько это возможно.
- Сокращают количество кликов до цели.
- Увеличивают скорость загрузки страницы.
-
Убирают отвлекающие факторы.
- Делают шаги до цели как можно проще.
Для сайтов и веб-приложений стоимость взаимодействия удобно оценивать в количестве кликов и времени, затрачиваемом пользователем на решение задач.
Конверсия — также хорошая мера стоимости взаимодействия. Легко измерить количество пользователей, купивших товар или зарегистрировавшихся на сайте.
Для полной оценки юзабилити сайта считают не только клики, время и конверсию, но проводят еще и юзабилити-тестирования, берут интервью у пользователей. Такие способы требуют затрат финансов и времени. А на эффект можно надеяться в долгосрочной перспективе.
Если сайт нужно оценить быстро, не вникая в количественные показатели, то лучше пользоваться списком основных параметров юзабилити или эвристиками Якоба Нильсена.
Одна из качественных оценок сайта — анализ основных параметров юзабилити. Необходимо посмотреть на сайт целиком и понять, насколько он удовлетворяет параметрам.
- Простота использования. Просто ли новому пользователю ориентироваться на сайте. Не мешают ли дизайн, реклама, всплывающие окна.
- Эффективность. Как быстро пользователь выполнит нужное ему действие: закажет товар, прочитает статью или получит консультацию.
- Запоминаемость. Сможет ли пользователь быстро сориентироваться на сайте при следующем посещении через некоторое время.
- Удовлетворенность. Насколько пользователь доволен внешним видом и информацией. Учитываются все факторы: дизайн, содержание, навигация по сайту.
- Ошибки. Количество ошибок и неправильных действий пользователя при навигации по сайту. Как их предотвратить и исправить последствия.
Якоб Нильсен — один из известных специалистов в области юзабилити.
Он начал работу над вопросами удобства пользовательского интерфейса, простоты дизайна сайтов и их структуры еще в восьмидесятых годах прошлого века.
Результат своих исследований Нильсен сформулировал в виде эвристик — законов юзабилити. Разработчики интерфейсов до сих пор используют эвристики как чек-лист для проверки сайта и оценки сложности интерфейса.
Согласно этим законам всю сложную работу должен брать на себя компьютер. Хорошо спроектированный сайт должен:
Пользователь всегда должен понимать, что сейчас происходит на сайте и какие действия нужно предпринять потом.
Часто это правило нарушают интернет-магазины и онлайн-сервисы. Бывает так, что после заказа и оплаты товара на сайте ничего не происходит. Покупатель не знает, как действовать дальше и волнуется — он заплатил деньги. Прошел ли платеж? Приедет ли курьер в нужное время?
Сообщение о статусе заказа в «Лабиринт.
ру»Хорошие интернет-магазины сразу после оплаты показывают пользователю страницу с информацией о следующих шагах, а также дублируют ее на электронную почту.
Система должна общаться понятными фразами и сообщениями. Сложные и узкоспециализированные термины необходимо заменить на простые слова.
«Дадата» объясняет принцип работы сервиса простым языкомПри использовании сайта что-то всегда может пойти не так: человек ошибется при вводе данных или нажмет не на ту кнопку. Поэтому хорошая система умеет возвращаться на несколько шагов назад и дает шанс все исправить.
За годы развития интернета у пользователей уже сложились определенные представления о том, как должен вести себя сайт, где находятся элементы навигации.
Если не следовать этим стандартам, то посетитель будет тратить время, чтобы разобраться с устройством сайта. Искать нужную информацию будет сложнее.
И уменьшать шансы их возникновения.
Самые распространенные ошибки на сайтах — неправильно введенная информация. Если пользователь неверно указал номер телефона, компания не сможет связаться с ним и потеряет клиента. Поэтому сайт должен сам следить за корректностью информации и помогать посетителям.
Все, что может понадобиться пользователю, лучше показать рядом.
Обычно так поступают интернет-магазины: в карточке товара они не только рассказывают про характеристики и цены, но еще и показывают стоимость доставки и говорят, как заказать.
«М.Видео» показывает всю необходимую информацию о iPhone8 на одном экране
В некоторых магазинах вся информация о доставке и оплате спрятана на отдельной странице. Пользователю приходится переключаться между вкладками и искать нужное. Это не удобно, возрастает риск совершить ошибку при заказе.
Интерфейс хорошего сайта минималистичен, он помогает, а не отвлекает. На виду должны быть те инструменты, которые нужны пользователю.
Лишние элементы, длинный текст и страница, перегруженная баннерами, — все это отвлекает от цели.
Длинная и запутанная форма заказа в магазине Wellfix. Нужно сократить и убрать ненужные лишние пункты.Перегруженный интерфейс и лишние элементы часто встречаются на страницах оформления заказов в интернет-магазине.
Когда нет времени проводить длительную оценку с помощью тестов и интервью и вникать в основы юзабилити, улучшить сайт можно с помощью простых правил.
Желательно, чтобы на любую страницу даже крупного портала пользователь мог попасть с главной, сделав не больше трех кликов. Сайт с такой структурой будет понятным и логичным. Пользователь не потеряется. И это поможет поисковым роботам быстрее проиндексировать все разделы сайта.
Чем дольше загружается сайт, тем выше вероятность, что пользователь устанет ждать и уйдет. По данным исследования Google, 53% пользователей покинут сайт, если он загружается дольше трех секунд.
Поэтому необходимо сжать изображения, сократить код на сайте, удалить ненужные скрипты. Скорость загрузки сайта удобно проанализировать при помощи сервиса PageSpeed Insights.
Удобно, когда информация на сайте начинается с вывода. Пользователи всегда спешат, поэтому бегло просматривают страницу. Самое важное нужно рассказать в начале. Если информация заинтересует посетителя, то он продолжит чтение.
Правило помогает определить оптимальные размеры кнопок и других элементов сайта. Чем больше размер элемента интерфейса, тем легче в него попасть мышкой или пальцем. Даже небольшое увеличение маленького элемента существенно увеличивает удобство взаимодействия с ним.
Но размеры нельзя изменять слишком сильно.
Правило основано на логарифмической зависимости, поэтому при достижении определенного размера оно перестает работать.
На курсе «UХ-аналитика» можно подробно узнать про юзабилити и про то, как сделать сайт проще. Что мотивирует пользователей, как правильно анализировать процент отказов, как найти слабые места сайта и увеличить прибыль компании.
Курс «UX-аналитика»
На курсе мы изучаем материалы и приобретаем навыки, которые необходимы для проектирования пользовательского опыта. Проходим путь от исследований и идей для проектирования до визуальных решений, сбора аналитических данных и тестирования.
- 32 часа теории и 16 практических заданий
- Живая обратная связь с преподавателями
- Неограниченный доступ к материалам курса
- Стажировка в компаниях-партнёрах
- Дипломный проект от реального заказчика
- Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Как сделать сайт удобным
Если говорить про юзабилити простыми словами, то нужно иметь в виду, что это не только характеристика простоты интерфейса, но и набор методов для улучшения сайта.
Можно проводить анализ пользователей, проверять сайт с помощью эвристик или искать ответы в законах юзабилити. Чем больше проблем юзабилити найдется, тем проще сделать сайт удобным для посетителей. В общем случае нужно следить за:
- дизайном сайта,
- скоростью загрузки страниц,
- качеством контента,
- навигацией,
- простотой использования.
Если сайт плохо выполняет свою функцию — приходит мало заявок или заказов, то стоит разобраться с юзабилити.
Якоб Нильсен: Раньше долго загружалась страница с большой картинкой, а сейчас – страница с множеством маленьких изображений
Основателя компании «Nielsen Norman Group» Якоба Нильсена уже давно называют королем юзабилити, причем это звание он носит по праву. На протяжении более десяти лет он оказывает помощь всем, кто стремится сделать веб-дизайн проще.
Недавно Якоб дал интервью ресурсу Econsultancy.com, в котором рассказал о развитии юзабилити, пользовательском опыте на различных устройствах и методах тестирования сайтов.
Каковы причины прогресса отрасли юзабилити за последнее десятилетие, в особенности за последнюю декаду?
Прогресс в плане юзабилити наблюдается на веб-сайтах и в мобильных приложениях. Несколько меньше внимания юзабилити уделяют сайты из таких тематик, как бытовая электроника и автомобили.
Измерить значение юзабилити можно по количеству компаний и людей, которые заняты в данной отрасли. Достаточно взглянуть на количество должностей, в которых присутствуют слова «UX», «юзабилити» и тому подобное.
Чем объясним такой прогресс?
Объясним он двумя вещами. Во-первых, сайт – наиболее адресный канал, в частности для электронной коммерции. Если люди не могут найти какие-то товары, то, соответственно, они не могут их купить. Поэтому удобство навигации по сайту и оформления заказа становятся залогом успешного бизнеса.
Сайты должны быть простыми для пользователей – вот основная мысль.
Важно также помнить, что отрасль e-commerce растет очень быстро и что очень много людей приобретают товары онлайн. Именно для таких пользователей юзабилити значит очень многое. Они будут покупать на тех сайтах, где сделать это легко, но никогда не вернутся туда, где совершать покупки трудно.
Раньше компьютеры воспринимались как некие «таинственные устройства», для пользования которыми нужны определенные навыки. Сегодня ситуация изменилась – компьютеры и мобильные гаджеты должны быть максимально адаптированы к пользователям, а не наоборот. Достаточно вспомнить, что сегодня все производители компьютерной техники стремятся доказать, что именно их устройствами пользоваться проще всего.
Вы ранее говорили, что мобильные сайты нуждаются в отдельном дизайне. Вы по-прежнему так считаете? Или озвученная вами проблема решаема за счет адаптивного дизайна?
Необходимость в отдельном мобильном дизайне все же есть.
Что касается адаптивного дизайна, то потенциально он может быть решением проблемы: большинство людей хотят видеть сайт с одним и тем же дизайном на всех устройствах.
Если быть честным, то это палка о двух концах. Сайт, созданный специально для мобильных устройств, не будет хорошо смотреться на обычном ПК. Поэтому я думаю, что пространство больших экранов настольных компьютеров следует использовать по максимуму. Дело в том, что люди жаждут одинакового функционала, как на мобильных сайтах, так и на «традиционных». Другой вопрос – реализовать эти функции можно по-разному.
То есть подход Mobile First Design, при котором проектирование сайта начинается с мобильной версии, не является вашим фаворитом?
Я думаю, что сайты должны в первую очередь делать именно то, что хотят их пользователи, причем на разных платформах. Одно устройство не должно доминировать над другими, в противном случае мы придем к негативному пользовательскому опыту на других гаджетах.
Какое место занимают планшеты? Они ближе к традиционным компьютерам или мобильным устройствам?
Планшет – «третий гаджет».
Создавая для него сайт с хорошим дизайном, нужно сосредоточиться на особенностях планшета. Можно спроектировать сайт для мобильных устройств, а затем скорректировать дизайн для экрана планшета или «сжать» дизайн сайта для десктопов. Однако конечный результат не будет оптимальным, поэтому для планшета нужно разрабатывать подходящий дизайн.
Сайты для планшетов пока не в полной мере соответствуют ожиданиям пользователей. Однако в будущем ими будут пользоваться все больше людей. Объем продаж будет расти прямо пропорционально удобству сайтов интернет-магазинов.
Я могу назвать планшет захватывающим устройством в прямом смысле слова. На большом экране десктопного монитора пользователь может открыть несколько программ и окон одновременно, отвлекаясь на них. Мобильные экраны для такого слишком малы.
Отмечу, что планшеты могут предложить пользователям многое. По сравнению с экранами других мобильных гаджетов, на планшете можно показать больше фотографий, сделать более широкие фильтры поиска.
Как найти баланс между юзабилити и достижением бизнес-целей? Приведу пример – всплывающее окно приносит результат, но вот пользователям оно, мягко говоря, не нравится.
Это непростой вопрос. Если какая-то навязчивая фишка приводит к увеличению продаж, то мнением недовольным пользователей можно пренебречь. Но с другой стороны, компании должны мыслить масштабно и учитывать долгосрочные последствия плохого юзабилити, а не кратковременные успехи в продажах. По крайней мере, нужны железные доводы в пользу игнорирования пользовательского опыта.
Как вы думаете, новостные сайты, с несколькими форматами объявлений, подвергаются риску в плане ухудшения юзабилити?
Я думаю, что владельцы рекламных площадок не слишком утруждают себя поиском новых бизнес-моделей. Да и реклама на сайте далеко не лучший вариант, как, например, контекстная.
Смотрите, некоторые рекламные модели работают отлично благодаря тому, что в полной мере отвечают ожиданиям пользователей.
Это уже упомянутая контекстная реклама, eBay, раздел с объявлениями в новостных изданиях.
Реклама на новостных сайтах менее таргетирована, предлагает низкие тарифы за 1 000 показов и тянет сайты вниз, ухудшая пользовательский опыт.
Высокоскоростной интернет сегодня доступен практически всем. Однако все равно попадаются сайты, страницы которых медленно грузятся. Почему так происходит?
Я думаю, что некоторые сайты просто пытаются добавить на свои страницы как можно больше всего – виджеты соцсетей, объявления и многое другое. Раньше проблемой были страницы с картинкой большого разрешения, а сейчас – с множеством небольших изображений, загружаемых из разных источников. Веб-страница, загружаемая в течение секунды, все ещё остается ориентиром.
Новые сайты интернет-магазинов придерживаются установленных рекомендаций по навигации, макетам страниц?
Думаю, да. Многие сайты проходят тщательное тестирование, дорабатываются в соответствии с советами экспертов юзабилити, включая вашего покорного слугу.
Полученный дизайн позволяет пользователям решать все необходимые задачи.
Вполне возможно вводить новшества в сфере пользовательского опыта, но это может оттолкнуть людей. Сайт должен предлагать нечто лучшее, чем раньше, чтобы оправдать время, затраченное на изучение его функционала.
Каков лучший способ проверки качества юзабилити сайта?
Долгое время он был одним и тем же: вы изучали, что ваши пользователи делают на сайте. То есть вы давали им задание из реальной жизни, например, поиск и покупка в интернет-магазине подарка на Рождество и смотрели, как они это делают.
Для тестирования пользовательского интерфейса нужно всего пять или десять пользователей – это совсем не трудно. Куда труднее выявить то, что нужно на самом деле. У многих веб-сайтов есть тысячи мелких ошибок, однако все сразу их не исправить. Идти здесь нужно шаг за шагом. Не превращайте тестирование в проект всей вашей жизни. Тестируйте здесь и сейчас, быстро исправляйте ошибки, делайте это снова и снова.
Некоторые крупные сайты запускаются или проводят редизайн, имея при этом недостатки пользовательского интерфейса. Что это, «синдром краткосрочного проекта» или что-то другое?
Может быть и так. При этом многие дизайнеры предпочитают прибегать к услугам аутсорса, а не содержать собственную команду по тестированию. Повторюсь, непрерывное тестирование и внесение изменений – лучший вариант.
В работе многих дизайнерских агентств, к сожалению, отсутствует процесс тестирования пользовательского интерфейса. Они хотят удивлять и радовать заказчика замысловатыми макетами, в то время как удивлять и радовать нужно пользователя. Стоит помнить, что вместо краткосрочных проектов лучше сделать выбор в сторону постоянного совершенствования. Акцент всегда и во всем нужно делать на пользователей.
Каковы наиболее распространенные проблемы юзабилити, с которыми вы сталкиваетесь?
Во-первых, это «непонятный язык» – сайты не описывают вещи просто и ясно, вместо этого создают собственную терминологию и запутывают пользователей.
Некоторые дизайнеры просто не хотят поставить себя на место аудитории.
Второе – отсутствие хороших фотографий товара. Изображение высокого качества даст пользователям полноценное представление о продукте, они хотят рассматривать товар с разных ракурсов. Сайтов с подобными возможностями мало.
Многие сайты грешат плохими навигацией и поиском. Для небольших сайтов это может быть и не столь критично, однако если у вас ресурс на 3 000 страниц, то поиск и навигация должны работать идеально. Иначе пользователи уйдут в Google, откуда уже перейдут на сайты ваших конкурентов.
Кстати о Google. Одной из причин доминирования этой системы на рынке интернет-поиска является именно юзабилити. Как вы думаете, если Google добавляет новые функции на страницу с результатами выдачи, рискует ли он потерять очки в глазах пользователей?
Страницы Google меняются в сторону чуть большей сложности, это так. Поисковик пытается решить сразу несколько проблем, а не работать по принципу «делаем что-то одно, но зато хорошо».
Пока что качеству юзабилити Google ничего не угрожает, но определенный риск есть, ведь сегодня это уже не страница с одними ссылками на сайты.
Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз
В основу этой книги положены результаты одного из самых крупных исследований эргономичности веб-дизайна, когда-либо проводившихся методом отслеживания движений глаз.
Автор популярных книг, Якоб Нильсен, и его соавтор, Кара Перниче, разработали и применили на практике строгую методологию исследования удобства использования веб-сайтов на основе технологии отслеживания движений глаз, чтобы проанализировать около 1,5 млн. фиксаций взгляда пользователей при просмотре веб-сайтов.
Изыскания авторов призваны помочь веб-дизайнерам, разработчикам программного обеспечения, писателям, редакторам, ответственным за выпуск продукции и рекламодателям лучше понять, как человек взаимодействует с веб-содержимым, пользуясь своим зрением, и что способствует значительному улучшению впечатления от посещения веб-сайтов и опыта их использования.
Авторы показывают читателю на сотнях примеров движений глаз, почему в одних случаях веб-дизайн оказывается удачным, а в других — неудачным.
Кроме того, авторы дают ценные рекомендации по компоновке веб-страниц, навигационных меню, отдельных элементов интерфейса сайта, выбору изображений и размещению рекламы.
Эту книгу необходимо прочитать всем, кто собирается серьезно заниматься коммерческой деятельностью в веб.
Издательство: Вильямс, 2010 г.
ISBN 978-5-8459-1652-5, 978-0-321-49836
Количество страниц: 496.
Содержание книги «Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз»:
- 11 Отзывы о книге
- 12 Посвящения
- 12 Благодарности
- 15 Об авторах
- 17 Предисловие
- 18 Отслеживание движений глаз — это еще не вся эргономика
- 19 Дополнительные отчеты
- 19 Вопросы, не раскрываемые в этой книге
- 22 От издательства
- 23 Глава 1. Отслеживание движений глаз и зрение
- 23 Принцип действия современного метода отслеживания движений глаз
- 25 Фовиальное и периферическое зрение
- 25 Фиксации взгляда и скачкообразные движения глаз
- 26 Почему пользователи чего-то не замечают
- 28 Гипотеза согласованности мысли и взгляда
- 28 Смотреть на что-нибудь — это хорошо или плохо?
- 29 Наглядное представление результатов отслеживания движений глаз
- 30 Просмотр тепловых карт и диаграмм взглядов, приведенных в книге
- 31 Задачи определяют взгляды
- 35 Другие примеры применения отслеживания движений глаз
- 36 Приборы для отслеживания движений глаз как устройства ввода
- 39 Глава 2. О нашем исследовании методом отслеживания движений глаз
- 39 Собранные данные
- 40 Участники исследования
- 41 Сеансы качественных и количественных исследований
- 42 Испытательные сеансы
- 42 Организация сеансов
- 43 Веб-сайты и испытательные задания
- 43 Количественные задания
- 44 Качественные задания
- 46 Измерения
- 51 Почему многие исследования методом отслеживания движений глаз недостоверны
- 51 Репрезентативная группа пользователей
- 51 Реалистичность выполняемых заданий
- 54 Большое разнообразие исследуемых веб-сайтов и выполняемых заданий
- 54 Оценка фактов
- 56 Стоимость исследований, проводимых методом отслеживания движений глаз
- 56 Общие затраты на исследование
- 57 Расходы по найму рабочей силы
- 58 Затраты на потерю данных отслеживания движений глаз и регистрации
- 58 Затраты, связанные с отслеживанием движений глаз
- 59 Оборудование
- 39 Собранные данные
- 61 Глава 3. Компоновка страниц
- 62 Как люди просматривают страницы
- 64 Как люди просматривают новости
- 67 Как люди ищут, что бы им купить
- 73 Как люди покупают конкретный товар
- 75 Как люди выполняют конкретные задания
- 78 Стандарты веб-дизайна, которые предполагают обнаружить пользователи
- 80 Организация страниц
- 81 Разреженные страницы стимулируют их просмотр
- 86 Размещение содержимого и зрительные указатели
- 87 Использование приоритетных участков
- 116 Продуманное распределение полезной площади экрана
- 122 Самые важные элементы должны выделяться
- 124 Цена привлекательности ложных ориентиров
- 128 Применение отслеживания движений глаз для улучшения компоновки страниц
- 62 Как люди просматривают страницы
- 131 Глава 4. Навигация
- 131 Меню и информационная архитектура
- 132 Глобальная навигация
- 133 Согласованность, постоянство и простота навигации
- 136 Подчиненная навигация не на должном уровне
- 139 Пропадание навигации
- 152 Каким образом информационная архитектура может оттолкнуть пользователей
- 155 Фирменная и маркетинговая символика в меню озадачивает пользователей
- 160 Служебная навигация
- 161 Навигационные элементы
- 161 Ссылки и заголовки
- 165 Использование информативных названий
- 165 Кнопки
- 179 Навигационные цепочки
- 179 Внешний интерфейс поиска
- 131 Меню и информационная архитектура
- 181 Глава 5. Основополагающие элементы веб-дизайна
- 181 На начальной странице
- 183 Регистрация
- 183 Правила соблюдения конфиденциальности
- 184 Контактная информация
- 185 Селекторы языка
- 185 Логотипы и ключевые фразы
- 186 Тележки для покупок
- 193 Когда следует показывать раскрытую тележку для покупок
- 198 Формы, поля и приложения
- 198 Группирование разделов и размещение меток полей
- 211 Не разделяйте поля для ввода номеров телефонов
- 212 Короткие формы легче просматривать беглым взглядом
- 214 Исключение текстовой подсказки в полях (хотя бы временное)
- 215 Рекомендации по сокращению фиксаций взглядов на формах
- 181 На начальной странице
- 219 Глава 6. Изображения
- 219 Что привлекает и отталкивает внимание в изображении
- 220 Изображения как препятствия
- 225 Исключение изображений, заполняющих пустые места на странице
- 229 Свойства, привлекающие внимание
- 229 Контраст, качество и детализация
- 230 Мотивация и ожидания способны привлечь внимание даже к некачественным изображениям
- 237 Оригинальность
- 242 Взаимосвязь с содержимым
- 251 Элементы, приковывающие взгляд
- 299 Информативные изображения
- 312 Изображения, напоминающие рекламу
- 314 Рисунки и иллюстрации
- 321 Изображения в электронной коммерции
- 336 Подвижные изображения
- 361 Глава 7. Реклама
- 362 Рекламные джунгли
- 363 Когда люди смотрят рекламу
- 363 Выполнение заданий в сравнении с обычным просмотром
- 369 Как люди воспринимают разные виды рекламы
- 371 Значение места расположения рекламы
- 377 Баннерная слепота
- 379 Текстовая реклама (спонсорские ссылки)
- 380 Причины, по которым люди просматривают спонсорские ссылки на страницах поисковой системы с результатами поиска по запросу
- 380 Спонсорские ссылки на других страницах
- 382 Спонсорские ссылки и явление поспешного отказа
- 386 О месте графики в рекламе на веб-сайтах
- 387 Рекламная кампания, согласующаяся с общим стилем оформления веб-сайта
- 393 Оценка просматриваемости рекламных объявлений и кампаний
- 395 Действенность внешней рекламы
- 395 Крупный удобочитаемый текст, графически оформленный отдельно от изображений
- 399 Притягательные и увлекательные графические свойства рекламы
- 409 Глава 8. Поведение пользователей во время просмотра веб-сайтов
- 409 Исчерпывающее обследование в сравнении с необходимым или желательным
- 414 Исчерпывающее исследование может оказаться слишком исчерпывающим
- 419 Плохая репутация некоторых бейсбольных сайтов
- 430 Что происходит, когда информация слишком сложная
- 434 Инерция поведения
- 440 Регистрация
- 440 Выборочное пренебрежение
- 444 Поведение после щелчка
- 444 Проверка после щелчка
- 447 Просмотр после щелчка
- 450 Беспрерывный просмотр
- 452 Просмотр с нетерпением
- 456 Просмотр по остаточному принципу
- 457 Выявление еще одного уровня пользовательского поведения с помощью отслеживания движений глаз
- 409 Исчерпывающее обследование в сравнении с необходимым или желательным
- 459 Приложение А. Как часто люди смотрят на основные элементы интерфейса веб-сайтов
- 461 Приложение Б. Словарь терминов
- 464 Предметный указатель
Отслеживание движений глаз и зрение
Компоновка страниц
Навигация
Изображения
Поведение пользователей во время просмотра веб-сайтов
Как часто люди смотрят на основные элементы интерфейса веб-сайтовИнструкция как скачать книгу Якоб Нильсен, Кара Перниче: Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз в форматах DjVu, PDF, DOC или fb2 совершенно бесплатно.
| Юзабилити это один из самых важных элементов продвижения сайта. Неудобный сайт пользователь скорее покинет, чем будет разбираться в том, что же хотел донести веб-разработчик или владелец сайта. Ниже приведены 110 принципов usability, которые помогут не допустить промахи и сделать сайт ориентированным на пользователя. Данные правила составлены по книге «Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов», Якоб Нильсен, Мари Тахир, Издательство: Вильямс, 2002 г. 1-10
Строго следить за применением прописных букв и соблюдением речевого форматирования 21-30
41-50
|
10 эвристик юзабилити для дизайна пользовательского интерфейса
Загрузите бесплатный плакат с 10 эвристиками юзабилити Якоба внизу этой статьи.
# 1: Видимость состояния системы
Дизайн всегда должен информировать пользователей о том, что происходит, посредством соответствующей обратной связи в разумные сроки.
Когда пользователи знают текущее состояние системы, они узнают результаты своих предыдущих взаимодействий и определяют следующие шаги. Предсказуемые взаимодействия создают доверие как к продукту, так и к бренду.
Пример эвристики юзабилити # 1:Индикаторы «Вы здесь» на картах торговых центров должны показывать людям, где они сейчас находятся, чтобы помочь им понять, куда двигаться дальше.
Наконечники
- Четко сообщайте пользователям о состоянии системы — никакие действия с последствиями для пользователей не должны предприниматься без их уведомления.
- Предоставьте отзыв пользователю как можно быстрее (в идеале — немедленно).
- Укрепляйте доверие через открытое и постоянное общение.
Узнать больше
# 2: соответствие системы и реального мира
Дизайн должен говорить на языке пользователей. Используйте слова, фразы и понятия, знакомые пользователю, а не внутренний жаргон. Следуйте обычным правилам, чтобы информация отображалась в естественном и логическом порядке.
Способ разработки во многом зависит от конкретных пользователей. Термины, концепции, значки и изображения, которые кажутся совершенно понятными вам и вашим коллегам, могут быть незнакомы или сбивать с толку ваших пользователей.
Когда элементы управления дизайна следуют реальным соглашениям и соответствуют желаемым результатам (так называемое естественное отображение), пользователям легче изучить и запомнить, как работает интерфейс. Это помогает создать интуитивно понятный опыт.
Пример эвристики юзабилити # 2:Когда элементы управления плитой соответствуют расположению нагревательных элементов, пользователи могут быстро понять, какой элемент управления соответствует тому, какой нагревательный элемент.
Наконечники
- Убедитесь, что пользователи могут понять смысл, не ища определения слова.
- Никогда не предполагайте, что ваше понимание слов или понятий будет соответствовать пониманию ваших пользователей.
- Исследование пользователей поможет вам раскрыть знакомую терминологию ваших пользователей, а также их ментальные модели вокруг важных понятий.
Узнать больше
# 3: Контроль и свобода пользователя
Пользователи часто совершают действия по ошибке. Им нужен четко обозначенный «аварийный выход», чтобы покинуть нежелательное действие, не проходя расширенный процесс.
Когда людям легко выйти из процесса или отменить действие, это способствует чувству свободы и уверенности. Выходы позволяют пользователям сохранять контроль над системой и избегать зависаний и разочарований.
Пример эвристики юзабилити № 3:Цифровые пространства нуждаются в быстрых «аварийных выходах», как и физические пространства.
Наконечники
- Поддержка Отменить и Повторить .
- Показать четкий способ выхода из текущего взаимодействия, например, кнопка Отмена .
- Убедитесь, что выход четко обозначен и доступен для обнаружения.
Узнать больше
# 4: Согласованность и стандарты
Пользователи не должны задаваться вопросом, означают ли разные слова, ситуации или действия одно и то же. Соблюдайте платформу и отраслевые соглашения.
Закон Якоба гласит, что люди проводят большую часть своего времени, используя цифровые продукты , отличные от ваших . Опыт использования этих других продуктов оправдывает их ожидания.Неспособность поддерживать последовательность может увеличить когнитивную нагрузку пользователей, заставляя их узнавать что-то новое.
Пример эвристики юзабилити # 4:Стойки регистрации обычно расположены в передней части отелей. Эта последовательность соответствует ожиданиям клиентов.
# 5: Предотвращение ошибок
Хорошие сообщения об ошибках важны, но лучший дизайн в первую очередь тщательно предотвращает возникновение проблем. Либо устраните условия, подверженные ошибкам, либо проверьте их и предоставьте пользователям вариант подтверждения, прежде чем они совершат действие.
Есть два типа ошибок: промахи и ошибки. Промахи — это неосознанные ошибки, вызванные невниманием. Ошибки — это сознательные ошибки, основанные на несоответствии мысленной модели пользователя и дизайна.
Пример эвристики юзабилити # 5:Поручни на извилистых горных дорогах предотвращают падение водителей со скал.
Наконечники
- Расставьте приоритеты: сначала предотвращайте дорогостоящие ошибки, а затем небольшие разочарования.
- Избегайте ошибок, предоставляя полезные ограничения и правильные значения по умолчанию.
- Предотвращайте ошибки, удаляя нагрузку на память, поддерживая отмену и предупреждая пользователей.
Узнать больше
# 6: Узнавать, а не вспоминать
Минимизируйте нагрузку на память пользователя, делая видимыми элементы, действия и параметры. Пользователь не должен запоминать информацию из одной части интерфейса в другую. Информация, необходимая для использования дизайна (например,г. метки полей или пункты меню) должны быть видимыми или легко извлекаемыми при необходимости.
У людей ограниченная кратковременная память. Интерфейсы, способствующие распознаванию, уменьшают объем когнитивных усилий, требуемых от пользователей.
Пример эвристики юзабилити # 6:Большинству людей легче узнать столицы стран, чем запоминать их. Люди с большей вероятностью ответят на вопрос Является ли Лиссабон столицей Португалии? , а не Какая столица Португалии?
Наконечники
- Позвольте людям распознавать информацию в интерфейсе, вместо того, чтобы запоминать («вспоминать») ее.
- Предлагайте помощь в контексте, вместо того, чтобы давать пользователям длинное руководство для запоминания.
- Уменьшите объем информации, которую пользователи должны запомнить.
Узнать больше
# 7: Гибкость и эффективность использования
Ярлыки, скрытые от начинающих пользователей, могут ускорить взаимодействие опытного пользователя, так что дизайн может удовлетворить как неопытных, так и опытных пользователей. Разрешите пользователям настраивать частые действия.
Гибкие процессы могут осуществляться по-разному, поэтому люди могут выбрать тот, который им подходит.
Пример эвристики юзабилити # 7:Регулярные маршруты указаны на картах, но местные жители, более осведомленные о местности, могут воспользоваться сокращенными путями.
Наконечники
- Предоставьте ускорители, такие как сочетания клавиш и сенсорные жесты.
- Обеспечьте индивидуальную настройку, адаптировав контент и функции для отдельных пользователей.
- Разрешить настройку, чтобы пользователи могли выбирать, как они хотят работать с продуктом.
Узнать больше
# 8: Эстетичный и минималистичный дизайн
Интерфейсы не должны содержать ненужную или редко необходимую информацию. Каждая дополнительная единица информации в интерфейсе конкурирует с соответствующими единицами информации и снижает их относительную видимость.
Эта эвристика не означает, что вам нужно использовать плоский дизайн — речь идет о том, чтобы содержание и визуальный дизайн были сосредоточены на самом главном. Убедитесь, что визуальные элементы интерфейса поддерживают основные цели пользователя.
Пример эвристики юзабилити # 8:Богато украшенный чайник может иметь излишки декоративных элементов, которые мешают удобству использования, например неудобную ручку или сопло, которое трудно мыть.
# 9: Помогите пользователям распознавать, диагностировать и устранять ошибки
Сообщения об ошибках должны быть изложены простым языком (без кодов ошибок), точно указывать на проблему и конструктивно предлагать решение.
Эти сообщения об ошибках также должны быть представлены с визуальной обработкой, которая поможет пользователям их заметить и распознать.
Пример эвристики юзабилити # 9:Знаки неправильного пути на дороге напоминают водителям о том, что они едут в неправильном направлении, и просят их остановиться.
Наконечники
- Используйте традиционные визуальные элементы сообщений об ошибках, например полужирный красный текст.
- Сообщите пользователям, что пошло не так, на понятном им языке — избегайте технического жаргона.
- Предложите пользователям решение, например ярлык, который может немедленно устранить ошибку.
Узнать больше
# 10: Справка и документация
Лучше, если система не нуждается в дополнительных пояснениях. Однако может потребоваться предоставить документацию, чтобы помочь пользователям понять, как выполнять свои задачи.
Справка и документация должны быть удобными для поиска и ориентированы на задачу пользователя. Будьте краткими и перечислите конкретные шаги, которые необходимо выполнить.
Пример эвристики юзабилити # 10:Информационные киоски в аэропортах легко узнаваемы и мгновенно решают проблемы клиентов.
Наконечники
- Убедитесь, что справочную документацию легко найти.
- По возможности представляйте документацию в контексте именно в тот момент, когда это требуется пользователю.
- Перечислите конкретные шаги, которые необходимо выполнить.
Узнать больше
Записка Якоба
Изначально я разработал эвристику для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году [Molich and Nielsen 1990; Нильсен и Молич 1990].Четыре года спустя я усовершенствовал эвристику на основе факторного анализа 249 проблем юзабилити [Nielsen 1994a], чтобы получить набор эвристик с максимальной объяснительной силой, в результате чего получился этот пересмотренный набор эвристик [Nielsen 1994b].
В 2020 году мы обновили эту статью, добавив дополнительные объяснения, примеры и ссылки по теме. Хотя мы немного уточнили язык определений, сама эвристика 10 оставалась актуальной и неизменной с 1994 года. Если что-то остается верным в течение 26 лет, это, вероятно, будет применяться и к будущим поколениям пользовательских интерфейсов.
Постер с 10 эвристиками бесплатно
Загрузите бесплатный плакат Якоба «10 эвристик юзабилити» внизу этой статьи в разделе Загрузки . Вы можете скачать итоговый плакат в 3-х размерах: полный плакат, A4 и Letter. Вы также можете загрузить полный набор из 11 плакатов (10 эвристик юзабилити и итоговый плакат.
Загрузите и распечатайте наши бесплатные плакаты с эвристикой юзабилити. Повесьте их дома, в офисе или подарите коллеге.См. Также
Примеры
Контрольные списки и инструкции
Список литературы
- Молич, Р.и Нильсен Дж. (1990). Улучшение диалога между человеком и компьютером, Коммуникации ACM 33, 3 (март), 338-348.
- Нильсен Дж. И Молич Р. (1990). Эвристическая оценка пользовательских интерфейсов, Учеб. ACM CHI’90 Conf. (Сиэтл, Вашингтон, 1–5 апреля), 249–256.
- Nielsen, J. (1994a). Повышение объяснительной способности эвристики юзабилити. Proc. ACM CHI’94 Conf. (Бостон, Массачусетс, 24–28 апреля), 152–158.
- Nielsen, J. (1994b). Эвристическая оценка. В Nielsen, J., and Mack, R.L. (Eds.), Методы проверки юзабилити, John Wiley & Sons, Нью-Йорк, Нью-Йорк.
Многие люди спрашивают, могут ли они использовать эту эвристику в своей работе. Да, но, пожалуйста, укажите Якоба Нильсена и укажите адрес этой страницы [nngroup.com/articles/ten-usability-heuristics] или процитируйте статью выше [Nielsen 1994a]. Если вы хотите распечатать копии этой страницы или воспроизвести контент в Интернете, пожалуйста, ознакомьтесь с информацией об авторских правах. Авторские права © Якоба Нильсена. ISSN 1548-5552
| Информационная архитектура для всемирной паутины пользователя Луи Розенфельд (автор Goodreads), Якоб Нильсен (предисловие), Питер Морвилл (автор Goodreads) 3,92 средняя оценка — 3531 оценка — опубликовано 1998 г. — 28 выпусков | Хочу почитать сохранение…
Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Разработка веб-юзабилити пользователя Якоб Нильсен 3,80 средняя оценка — 1154 оценки — опубликовано 2000 г. — 15 изданий | Хочу почитать сохранение… Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Приоритет удобства использования в Интернете пользователя Якоб Нильсен, Hoa Loranger 3,94 средняя оценка — 644 оценки — опубликовано 2006 г. — 9 изданий | Хочу почитать сохранение… Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Юзабилити домашней страницы: 50 сайтов деконструированы пользователя Якоб Нильсен, Мари Тахир 3,75 средний рейтинг — 360 оценок — опубликовано 2001 г. — 7 изданий | Хочу почитать сохранение… Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Юзабилити-инженерия пользователя Якоб Нильсен 3,96 в среднем — 256 оценок — опубликовано 1993 г. — 7 изданий | Хочу почитать сохранение… Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Визуализация информации: восприятие для дизайна пользователя Колин Уэр, Якоб Нильсен (редактор), Якоб Нейлсен (редактор), Джонатан Грудин (редактор) 4,05 средняя оценка — 168 оценок — опубликовано 2000 г. — 13 выпусков | Хочу почитать сохранение… Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Удобство мобильного использования пользователя Якоб Нильсен, Ралука Будиу 3,72 средняя оценка — 152 оценок — опубликовано 2012 г. — 10 изданий | Хочу почитать сохранение… Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Ошибки с графическим интерфейсом: что нельзя и делать для разработчиков программного обеспечения и веб-дизайнеров пользователя Джефф Джонсон, Якоб Нильсен 3,58 средний рейтинг — 132 оценки — опубликовано 2000 г. — 3 издания | Хочу почитать сохранение… Книга оценок ошибок.Обновите и попробуйте еще раз. Оценить книгу Очистить рейтинг 1 из 5 звезд2 из 5 звезд3 из 5 звезд4 из 5 звезд5 из 5 звезд | |
| Веб-удобство отслеживания взглядов пользователя Якоб Нильсен, Кара Пернис 3,77 средняя оценка — 82 оценки — опубликовано 2007 г. — 6 изданий |
Weblapok ergonómiája · Weblabor
Веб-эргономия (vagyis a gyakorlati használhatóság), mint fogalom Якоб Нильсен: Веб-дизайн, созданный кересцццзюто-эль-хоум.Sok olyan szempontot olvastam benne, amelyet magam is fontosnak tartottam, voltak azonban olyanok, amelyekre rádöbbentem az olvasás folyamán. De leginkább annak örültem a könyv áttekintése után, hogy az ott leírtakra építhetek a további munkáimban, это мята и тема egyik vezető szakemberét, hivatkozási alzaphekéntérént. A saját rossz tapasztalataim indítottak arra, hogy készítsek egy felmérést arról, milyen a mai magyar weboldalak minősége az ergonómiai szempontok alapján. A továbbiakban ezen kutatásom eredményeit fogom bemutatni.Ahol a terjedelem ezt lehetővé teszi, szeretném azt is bemutatni, hogy hogyan lehetne használhatóbb oldalakat készíteni. Természetesen ezek — это csak lehetőségek, és nem feelétlenül a legjobbak.
felmérés módszerei
kitűzött Minta (а továbbiakban Minta) а következő kategóriákból всех (а részletes Lista cikk végén található):| Típus | Darabszám |
|---|---|
| Altalanos portálok | 7 |
| Népszerű oldalak | 12 |
| Üzleti cégek | 8 |
| Magánszemélyek | 5 |
| Honlap-fejlesztéssel foglalkozó cégek oldalai | 11 |
| Egyetemek | 7 |
| Főiskolák | 4 |
| Középiskolák | 6 |
E kategóriákból 60 oldalt «véletlenszerűen» választottam ki.Египетский ilyen méretű minta már alkalmas arra, hogy következtetéseket vonjak le, de a kategóriánkénti eloszlások értékeit csak nagyon óvatosan szabad értelmezni. Nagyon sokféle konkrét mérést lehet (és lett volna érdemes) megvizsgálni, de a feladat nagysága miatt csak néhány alapvető, viszonylag könnyen mérhető jellemzőltam vizsgálni. После 1024 × 768 — в качестве монитора Internet Explorer 6.0 имеет значение Firefox. Az első böngésző elterjedtsége, másik pedig a szabványoknak való megfelelés igénye miatt fontos.Аз oldalak szövegének vizsgálatához Контекст 0.97.3-as verzióját — это слово «szavak száma» szolgáltatást használtam fel.
A vizsgálat eredményei
Megéri kivárni a letöltődést?
Fontos, hogy egy oldal letöltési ideje egy bizonyos lélektani határ alatt legyen, ameddig az olvasó még „türelmesen vár”. Nem mindegy tehát, hogy mekkora egy oldal, aminek a letöltését végig kell várni. Természetesen vannak olyan oldalak, amelyek «információtartalma» alapvetően nem szöveges, hanem pl.kép alapú. Ilyenkor a látogató sokszor inkább kivár.A közhiedelemmel ellentétben a hosszú letöltési időt sok esetben nem várják meg a látogatók — még egy tetszetős megjelenésű oldal kedvért sem. Родословная egyszerű módszerekkel kis méretű, mégis mutatós oldalakat lehet készíteni. Megjegyzem, még nagyobb tévedés, hogy a jó megjelenés el tudja adni a gyenge tartalmat.
Letöltési méret
A Minta átlagos oldalmérete 185 KB, ami modemes elérés esetén körülbelül fél perc alatt töltődik le.Nagyon jó tartalom kell ahhoz, hogy ennyit várjunk érte, hiszen a szakirodalom általában 0,1 és 1 másodperc közötti letöltési időt javasol, e fölött a látogatrelme joggal.Miért ilyen nagy?
Többek között azért, mert az oldalak méretének 74% -a nem szöveges, hanem egyéb (döntően kép) állomány. Bár nem cél a képek (és egyéb multimédia elemek) teljes elhagyása, fontos, hogy az oldalak formázásához minimális számú és méretű képet használjunk. Ügyes trükkökkel egy képet több helyen является felhasználhatunk egy oldal kinézetének kialakításában.Ilyenkor a kép természetesen csak egyszer töltődik le.Szöveges tartalom
További érdekes tapasztalat, hogy HTML forrásokban rengeteg olyan formázó element és tulajdonság található, только практиковаться в CSS-вакансии, чтобы иметь возможность использовать старый CSS. Könnyen belátható, hogy a tablázatok leírására szolgáló sok elem jelentősen csökkenti a HTML tényleges szövegtartalmát.1KB HTML кодировка 102 изображения, размер которой составляет 10,2%.Természetesen nem a 100% a cél, de az ember talán joggal várna el magasabb értéket.
| Típus | Oldalméret | HTML | Külső CSS | Betű / HTML KB | |||||
|---|---|---|---|---|---|---|---|---|---|
| Általános portálok | 280 kb 3 | Népszerű oldalak | 232 кб | 51 кб | 3,5 кб | 61,3 | |||
| Üzleti cégek | 135 кб | 35 кб | 3,1 кб | Magánszemélyek | 479 кб | 79 кб | 5,8 кб | 100,4 | |
| Honlap-fejlesztéssel foglalkozó cégek | 127 кб | 2632 кб | |||||||
| Egyetemek | 106 кб | 18 кб | 2,9 кб | 110,7 | |||||
| Főiskolák | 164 кб | 24 кб | 1,3 кб 125,9323 | 491 | Középiskolák | 88 kb | 5.8 kb | 0 kb | 385,6 |
| Összesítve | 185 kb | 45 kb | 3,4 kb | 102,4 |
A felhasználó irányít
Jóval a Web születése előtt, a grafikus képernyők megjelenésének idején «kicsúszott» и programmozó kezéből a felhasználó irányítása. Az Interaktivitás eszméje felhatalmazza a felhasználót arra, hogy azt tegyen, amit akar, és úgy tegye, ahogy akarja — természetesen bizonyos keretek között, de az ésszerűsülgdenákrain.Сайнос а Weben ezt sokan ismét elfelejtik, és webfejlesztőként nem adják meg az olvasónak azt a szabadságot, ami talán joggal elvárható lenne.Rögzített oldalszélesség
Az olvasók a PC-től kezdve kéziszámítógépekig és mobiltelefonokig különböző hardvereken sokféle képernyőmérettel olvassák. PC-n ma 640 x 480, 1600 x 1200, больше и больше. Ha ezt egy webfejlesztő nem veszi figyelembe, akkor sok felhasználót jó eséllyel kizárhat a látogatói közül.Tekintve, hogy általában pont a látogatók csalogatása és megtartása a cél, szerintem minden webfejlesztő számára megfontolandó a rugalmas oldalszélességre való tervezés. Nem nehéz elképzelni, hogy milyen könnyen továbbáll a felhasználó, ha problémái vannak az oldal megjelenésével.Példaként nézzük meg, hogy hogyan használható a startlap.com 640 és 1024 pixeles szélességen (690 пикселей больше, чем больше).
Startlap 640 képpontos szélességen
Jól látható, hogy kisebb felbontásban megjelent и vízszintes görgetősáv, így sokszor szükség lehet a vízszintes görgetesznéraz haszintes.Startlap 1024 просмотров
Nagyobb felbontás esetén kihasználatlan helyeink vannak a képernyőn. Én úgy gondolom, senki nem azért vesz nagyobb felbontású monitort, hogy egy weboldal látogatásakor üres, indokolatlanul kihasználatlan csíkok legyenek a képernyőjén. Hiszen pont azért nagy a felbontás, hogy több információ jelenhessen meg rajta egyszerre.Nézzünk egy példát alkalmazkodó oldalszélességű oldalra 480 пикселей 1024 пикселей:
Alkalmazkodó oldal 480 пикселей, szélességen
480 пикселей, még kényelmesen ningízüzhats.Alkalmazkodó oldal 1024 képpont szélességen
Nagy felbontáson problémaként esetleg azt lehetne ellenérvként felhozni, hogy a túl hosszú sorok nehezen olvashatók lehetnek. Véleményem szerint эз Джовал kisebb проблема-, мята аз Ures савок kétoldalt FIX szélesség esetén, ugyanis га zavaró Хоссу сор, látogatónak bármikor ван lehetősége аз ablakméretet csökkenteni, vagy esetleg Eleve nagyobb betűmérettel szeret olvasni, amikor Хоссу сор Исмет нэм туман problémát jelenteni. De ha a kis méret miatt görgetnie kellene, nem tudja nagyítani a képernyőjét.Természetesen bizonyos esetekben indokolt lehet a rögzített oldalszélesség, de ez véleményem szerint túl sokszor csak azért fix, hogy könnyebben megvalósítható legyen, illetvellévetel esely webhely. Itt még egy indokot szeretnék említeni, ami miatt szerintem ez legtöbbször nem célravezető. Jó néhány oldallal találkoztam, ahol a Precízen belőtt oldalkialakítás teljesen szétesett, ahogy a nehezen olvasható betűméretet nagyobbra állítottam.
Минта 70% -a rögzített szélességben jelenik meg.Исправить szélességű oldalak nagy része 800×600-as képernyőfelbontásra tervez. Nézzünk EGY diagramot Pontos adatokról (а teljes hosszúságú vonalak аз alkalmazkodó felépítésű oldalakat jelentik):
Weboldal szélességek
Хоссу oldalak
Weben olvasó ного tolerálja Хосс oldalakat, ennek ellenére аз áltagos oldalmagasság (1024 × 768, как felbontáson ÉS Mozilla 1.7-en mérve) 1555 képpont. Az olvasók többnyire nem olvasnak végig egy ilyen hosszú oldalt.A teljesség kedvéért megjegyzem, hogy egy adott oldalméret mást-mást jelent különböző célú oldalaknál, pl.еги олян тарталомджегизек ваги фурум желлег олдалнал, ахол аз олдаль тетейен еленнек мег и легкая информация, эннек а меретнек нем войлкетлен ван хатранья. Ennek érdekében аз egyes oldalakat témák szerint lenne érdemes kategorizálni, és így pontosítani az itteni eredményeket. Talán még annyit a számok érvényességérl, hogy a honlapoknál a kezdőlapot vizsgáltam, ahol fórumok egyáltalán nem szoktat előfordulni, a tartalomjegyzéleníkáláká
Rögzített méretű szöveg
felhasználó sokféle környezetben olvashatja EGY oldal tartalmát, Е. С. ного feltétlen felel мек számára Я А betűméret, amelyet fejlesztő határozott мек, hiszen fejlesztő monitora, szeme érzékenysége, ízlé нэм feltétlen туман megegyezni в látogatókéval. Böngészők adnak ugyan lehetőséget ARRA, hogy аз oldalt kicsinyítve-nagyítva jelenítsük Мэг де га szövegeket (menüpontokat, címeket) Keppel ábrázolunk, АККОР эз Szabadság elveszett, illetve аз Internet Explorer rögzített betűmérettel megadott szövegek átméretezéséres SeM Кепеш. A megoldás az, hogy lehetőleg ne képpontban megadott méretű, hanem relatív mértékeket adjunk meg a szövegek esetén. Másrészt a szöveges információt (a logó kivételével) lehetőleg sose képpel jelenítsünk meg. CSS nagyon jó lehetőségeket nyújt arra, hogy kép-szerű feliratokat szövegesen valósítsunk meg. Nézzünk erre is példát az ilovejackdaniels.com webhelyről:
CSS segítségével formázott kép hatású menü
Eredeti beállításokkal vizsgálva negvejackdaniels.Firefox alatt két fokozattal nagyobb betűméreten megfigyelhető, hogy csak a jobboldali címek vannak képpel megvalósítva, az oldal többi részén minden szöveg mérete megváltozott. Ami ennek az oldalnak az egyik szépsége: középső piros sor kivételével az oldalkialakítás ugyanúgy élvezhető, nem esett szét a betűméret változatásától.CSS-сегмент, созданный с помощью меню, указывающий на то, что
Минта 68% — это тартал, 88% — не может использоваться в Internet Explorerrel.Mozilla — это расширенный браузер Firefox — épp a felhasználó érdekében — az ilyen szövegeket is átméretezik.Keretek
A keretek csábítanak arra, hogy a reklámcsíkot vagy a menüsort az oldal valamelyik szélén rögzített pozícióban tartsuk. Van azonban jó néhány probléma ezzel:- A menüt tartalmazó keret görgetősávját ки szokás kapcsolni esztétikai okokból. Ha egy adott méreten ez a szöveg kilóg a neki szánt helyből, nem lehet beginörgetni a kilógó részt — illetve csak különböző, nem széles körben ismert trükkökkel.
- Вебсим nem ír le egy állapotot, nem tud leírni kereteket, így nem lehet egyszerűen címezni egy oldalt. Ez például linkeknél vagy könyvjelzőknél okoz problémát.
- Nem lehet tudni a képernyőfelbontást, így lehet, hogy egy kézi számítógépen vagy mobilon csak egy rögzített méretűre tervezett keretomb részlete látszórmy, a tarténylenylezlete látszgeslmmi.
- Keretes oldalak kinyomtatása is nagyon problémás.
slaveland.hu oldal baloldalt a logó miatt, felül pedig a menü miatt keretet használ. Átlagos felbontás esetén Nincs есть Гонд:Keretek átlagos felbontások
350 képpont szélességnél аз oldal teljesen használhatatlan: а бал és felső Кереть felület háromnegyedét elfoglalja, A maradék negyed területen pedig MEG görgetősávok является megjelentek:Keretek кис felbontásban
A MINTA oldalak negyede használ kereteket, bár a nagy portálok közül egy sem.Sok olyan weboldal, amely megengedte a választást a keretes illetve a frame nélküli változat között, úgy találta, hogy a felhasználók jobban kedvelik a keret nélküli megjelenítést. (Якоб Нильсен: Веб-дизайн)
Következtetések
A vizsgált minta alapján kimutatható, hogy a mai magyar weboldalak fejlesztői alapvető ergonómiai szempontokat is mellőznek. Látszik, hogy a probléma szemléletbeli, amin átfogó «felvilágosító» munkával lehet csak változtatni. A mai magyar helyzetet tekintve szélmalomharcnak tűnhet az ergonómikus web kialakítás hirdetése, de vannak, akik komolyan felvállalják ezt a küzdelmet.Én — это ezek közé tartozom.Irodalomjegyzék
- Jakob Nielsen: Web-design Typotex Elektronikus Kiadó, 2002 (második kiadás)
- HTMLInfo v2.0. алапок III.
Használhatóság = le a képekkel!
http://www.prszichologia.hu/cikk/cikk.phtml?id=40 - Руководство по веб-стилю
http://www.webstyleguide.com - Джордж Мюррей, Таня Костанцо:
Юзабилити и Интернет : Обзор
http: // www.collectionscanada.ca/9/1/p1-260-e.html - Констанс Дж. Петерсон:
Написание для веб-аудитории
http://www.smartisans.com/articles/web_writing.aspx - Кэрол Гобл :
Семантическая сеть: эволюция для революции
http://www.elsevier.com/locale/comnet - Yiyu Yao:
Web Intelligence: изучение структур, семантики и знания Интернета
http: // www.elsevier.com/locale/knosys - Консорциум World Wide Web (W3C)
http: // www.w3.org - W3C Magyar Iroda
http://w3c.hu
Melléklet
| Általános portálok | |||
|---|---|---|---|
| Startlap | http://www.startlap.com | /9049 hu | http://www.lap.hu/ |
| Origo | http://origo.hu/ | ||
| Index | http://index.hu/ | ||
| Порт | http://port.hu/ | ||
| Stop | http: // www.stop.hu/ | ||
| TÁR | http://www.tar.hu/ | ||
| Népszerű oldalak vegyesen (top100.hu alapján) | ||
|---|---|---|
| CoffeCup | CoffeCup | .hu / |
| AdverSite | http://www.adversite.hu/ | |
| Vicclap | http://vicclap.hu/ | |
| Csajozás | http: //zwww.csajo. hu / | |
| Ingatlan.com | http: // www.ingatlan.com/ | |
| SlaveLand | http://sl.e98.hu/ | |
| lol.hu | http://lol.hu/ | |
| duen.hu | http: / /www.duen.hu/ | |
| KarrierExpressz | http://www.karrier.expressz.hu/ | |
| Gumicsizma | http://www.gumicsizma.hu/ | |
| Térk328 http://www.terkepcentrum.hu/ | ||
| Net-Cafe | http: // www.net-cafe.hu/ | |
| Üzleti webhelyek | ||
|---|---|---|
| G-Neo | http://www.ngeo.hu/ | |
| Geomontan | http: //www.geomleontan. net / | |
| DigiTerra Informatikai Szolgáltató Kft. | http://www.digiterra.hu/ | |
| Microsoft Fejlesztői Portál | http://www.developer.hu/ | |
| Szoftverműhely | http://www.szoftvermuhely3 | |
| MaxInfo | http: // www.maxin.hu/ | |
| D-Bridge | http://www.dbridge.hu/ | |
| HWSW | http://www.hwsw.hu/ | |
| Magánszemélyek6 | Matiz | http://www.tar.hu/matiz/ | ||
|---|---|---|---|---|
| Magyar Charmed Portál | http://bubajosboszorkak.hu/ | |||
| Loogos | http://www.loogoos.hu/ | |||
| кружевной | http://www.lacy.hu/ | |||
| ErikaStúdió | http: // erikastudio.uw.hu/ | |||
| Honlap-fejlesztéssel foglalkozó cégek oldalai | ||
|---|---|---|
| Xubion | http://www.xubion.hu/ | |
| GF328.gfw.gfw.gfx | http://www.xubion.hu/ / | |
| Webdoktor | http://webdoktor.hu/ | |
| Neosoft | http://neosoft.hu/ | |
| Webra | http://www.webra.hu/ | |
| Thomas | http: //www.thomas98.hu / | |
| Siwwwa | http://www.siwwwa.hu/ | |
| LebroNet | http://www.lebronet.hu/ | |
| CraftCore | http: //www.craftcore .hu / | |
| Calcun | http://www.calcun.hu/ | |
| Kirowski | http://cms.kirowski.com/ | |
| Egyetemek | http://www.sze.hu/ | |
|---|---|---|
| SZOTE | http: // www.szote.u-szeged.hu/ | |
| PTE | http://www.pte.hu/ | |
| ME | http://www.uni-miskolc.hu/ | |
| SZIE | http://www.szie.hu/ | |
| SOTE | http://www.sote.hu/ | |
| ELTE | http://www.elte.hu/ | |
| Főiskolák | ||
|---|---|---|
| Szegedi Hittudományi Főiskola | http://www.theol.u-szeged.hu/ | |
| Pünkösdi Teológia | http: // www.ptf.hu/ | |
| Juhász Gyula | http://www.jgytf.u-szeged.hu/ | |
| Dunaújvárosi Főiskola | http://www. Оставить комментарий
| |