Прокрутка и внимание в веб дизайне
Представляю вашему вниманию мой второй перевод (хабрапользователь newa) — новую статью Якоба Нильсена, вышедшую вчера.
Пользователи интернета тратят 80% времени, изучая информацию на «первом экране». Несмотря на то, что прокруткой они тоже пользуются, только 20% их внимания приходится на то, что расположено ниже «первого экрана».
В веб дизайне существует большая неразбериха с т.н. «первым экраном» и важностью показа самой главной информации в области, изначально видимой пользователем. (Т.е., фактически определение таково: «первый экран» обозначает «видимый без дополнительных действий».)
Во времена зарождения интернета пользователи, зачастую, вообще не использовали прокрутку. Они попросту смотрели на ту часть страницы, которая была для них видимой, и решали — оставаться им на странице или нет. Таким образом, в исследованиях по юзабилити в тот период (1994-1996), сайты зачастую не имели успеха, если важная информация находилась за пределами «первого экрана», поскольку большинство пользователей ее не видели.
Такое нежелание прокручивать страницы было достаточно закономерным в то время, поскольку чаще всего компьютеры у пользователей были медленными. Диалоговые окна и вся мультимедиа система прекрасно работали, не требуя прокрутки. (Конечно, иногда пользователи сталкивались с прокруткой текстовых полей, но им не нужно было использовать прокрутку для того, чтобы увидеть кнопки и опции, и, именно потому, пользователи могли принимать решения, основываясь на том, что они видели.)
Однако, в 1997 году я отказался от принципа, рекомендующего избегать страниц, которые требуют прокрутки, потому что пользователи должны были приспособиться к прокрутке на вебе. Это был тот редкий случай, когда принципы юзабилити быстро изменились. Вообще говоря, положения юзабилити остаются стабильными спустя много лет: 80% принципов 90-ых годов все еще в силе.
читать целиком http://habrahabr.ru/blogs/ui_design_and_usability/88692/
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Перевод] Как я создал меняющую настроения анимацию с помощью масок CSS
Помните мультфильмы, которые мы смотрели в детстве? В то время они были олицетворением анимации. Сейчас анимация – это не только мультфильмы, мы встречаем ее почти каждый день, проверяя телефон или... читать далее
Таблицы в адаптивном дизайне — 2
В продолжение поста о дизайне таблиц, предлагаю примеры практических решений, которые помогут пользователю лучше взаимодействовать с данными в табличном виде на любых устройствах. Почти пять лет... читать далее
Путь верстальщика: с нуля до сеньора
Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик. Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти)... читать далее
[Перевод] Медиа-запросы в адаптивном дизайне 2018
В июле 2010 года я написала статью «Как использовать CSS3 медиа-запросы для создания мобильной версии вашего сайта» для журнала Smashing. Спустя почти восемь лет эта статья по-прежнему очень... читать далее
[Перевод] Методики и инструменты для разработки стилей веб-страниц
Не будем ходить вокруг да около, скажем прямо: процесс написания хорошего CSS-кода может быть очень и очень тяжёлым. Многие разработчики не хотят связываться со стилями. Они готовы заниматься всем,... читать далее
[Перевод] Философия CSS
Привет всем! Пришло время сообщить, что мы рассчитываем еще до конца февраля выпустить новую книгу по CSS, которая рекомендуется всем, кто уже освоил Макфарланда (пока в наличии, ближайшую допечатку... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте