F дизайн: Джип тюнинг — тюнинг центр внедорожников ф дизайн интернет магазин — homyrouz.ru

Содержание

F-паттерн в дизайне интерфейсов: Как пользователи просматривают контент

Вы читаете перевод статьи Николая Бабича “F-Shaped Pattern for Reading Content”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

Что такое F-паттерн и как он работает?

F-паттерн — это самая распространенная траектория сканирования контента, организованного в форме блоков. “F” — то есть fast, быстро. Именно так люди читают ваш контент. Они с поразительной скоростью, буквально за несколько секунд пробегают взглядом по всей странице.

F-паттерн получил всеобщее признание после того, как компания Нильсен-Норман Групп провела исследование движений глаза при чтении веб-контента. В ходе исследования более 200 пользователей изучали тысячи веб-страниц. Исследование выявило закономерность в движениях глаз пользователей при изучении разных сайтов: общая траектория сканирования контента напоминает букву “F”. При этом можно выделить три этапа сканирования:

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

Наши глаза уже “натренированы” начинать чтение из левого верхнего угла, сканировать по горизонтали, потом перепрыгивать в начало следующей строки и снова сканировать по горизонтали — пока не найдется что-то интересное.Исследования компании Нильсен-Норман Групп показывают, что пользователи (читающие слева направо) обычно сканируют тяжелые блоки текста по траектории, которая напоминает буквы “E” и “F”.

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

Очевидно, что траектория сканирования не всегда состоит из трех четких отрезков. Когда пользователь находит что-то интересное, он начинает читать, формируя горизонтальные линии.

Зачем использовать F-паттерн?

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

Когда использовать F-паттерн?

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

Сайт Си-эн-эн использует F-паттерн.

Как использовать F-паттерн

F-лейаут буквально позволяет дизайнеру контролировать, на что пользователь обратит внимание.

Расставьте контент по приоритетности

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

Дайте понять, чего ожидать от страницы

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

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

Проектируйте под сканирование, а не под чтение

Когда будете применять в дизайне этот паттерн, думайте о пользователях-“сканерах”. Разместите контент, который может их заинтересовать, на линиях F-паттерна:

Начинайте новый параграф с ключевых слов, которые привлекут внимание “сканеров”.
Люди в первую очередь обращают внимание на доминирующие элементы (элементы или области с большим визуальным весом). Увеличьте визуальный вес важных вещей: если это текст, то используйте типографику (попробуйте выделить в тексте ключевые слова), а если это кнопка — окрасьте ее в яркий цвет.
Один параграф — одна идея. И как можно чаще используйте буллиты.
Расположите важный контент (например, призыв к действию) слева или справа — там, где пользователь начинает и заканчивает сканирование. В этих точках взгляд пользователя на мгновение останавливается — а значит, он уделит важной информации чуть больше внимания.

Используйте боковую панель

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

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

Медиум размещает второстепенную навигацию на боковой панели.

Избегайте скучных лейаутов

Основной недостаток F-лейаута в том, что он располагает к монотонности. Вашим пользователям быстро наскучат одни и те же повторяющиеся строки. А вам не нужен скучающий пользователь — так что разбавьте область сканирования каким-нибудь “несуразным” элементом.

Источник изображения: tutsplus.

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

Заключение

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

Читайте статью про Z-паттерн!

Ф-Дизайн: отзывы сотрудников о работодателе

Написать отзыв про Ф-Дизайн

Абакан

Абу-Даби

Агидель

Агрыз

Адлер

Азов

Аксай

Актобе

Алапаевск

Алатырь

Алдан

Алейск

Александров

Алексеевка (Белгородская область)

Алексин

Алматы

Алупка

Алушта

Алчевск

Альметьевск

Амстердам

Амурск

Анапа

Ангарск

Анталья

Апатиты

Апрелевка

Арарат

Аргаяш

Арзамас

Армавир

Арсеньев

Артём

Архангельск

Асбест

Асино

Астрахань

Атырау

Ачинск

Ашхабад

Байконур

Баку

Балаково

Балахна

Балашиха

Балашов

Бали

Бангкок

Барнаул

Барыш

Батайск

Бахмут

Бахчисарай

Бежецк

Белгород

Белебей

Белогорск

Белокуриха

Белорецк

Белореченск

Белоярский

Бердск

Березники

Берёзовский

Берлин

Берн

Бийск

Биробиджан

Бирск

Бишкек

Благовещенка

Благовещенск

Благодарный

Бобруйск

Богородск

Боготол

Бодайбо

Бологое

Болхов

Большой Камень

Бор

Борисоглебск

Боровск

Братск

Брест

Бронницы

Брянск

Бугульма

Бугуруслан

Будапешт

Буденновск

Бузулук

Бургас

Бутурлиновка

Буффало

Бухара

Варна

Варшава

Вахруши

Великие Луки

Великий Новгород

Великий Устюг

Верхнедвинск

Верхнеуральск

Верхний Тагил

Верхний Уфалей

Верхняя Пышма

Верхняя Салда

Веспрем

Видное

Вильнюс

Вилючинск

Винница

Витебск

Вичуга

Владивосток

Владикавказ

Владимир

Волгоград

Волгодонск

Волгореченск

Волжск

Волжский

Вологда

Володарск

Волоколамск

Волхов

Вольск

Воркута

Воронеж

Ворсма

Воскресенск

Воткинск

Всеволожск

Выборг

Выкса

Вытегра

Вышний Волочек

Вяземский

Вязники

Вязьма

Вятские Поляны

Гагарин

Гамбург

Гатчина

Геленджик

Георгиевск

Гётеборг

Глазов

Гомель

Горки Ленинские

Горно-Алтайск

Городец

Гороховец

Горячий Ключ

Грайворон

Гродно

Грозный

Грязи

Губкин

Губкинский

Гуково

Гулькевичи

Гусев

Гусь-Хрустальный

Гюльнар

Гянджа

Дальнереченск

Дания, Хельсинки

Данков

Дедовск

Денпасар

Дербент

Десногорск

Дзержинск

Димитровград

Дмитров

Днепр (Днепропетровск)

Добрянка

Долгопрудный

Домодедово

Донецк

Донской

Дубна

Дудинка

Душанбе

Дюртюли

Евпатория

Егорьевск

Ейск

Екатеринбург

Елабуга

Елец

Еманжелинск

Енакиево

Ереван

Ессентуки

Ефремов

Железноводск

Железногорск

Железнодорожный

Жигулевск

Житомир

Жодино

Жуковский

Забайкальск

Заволжье

Закаменск

Заозерск

Западная Двина

Заполярный

Запорожье

Зарайск

Заречный

Звенигород

Зеленоград

Зеленодольск

Зеленокумск

Златоуст

Знаменск

Зубова Поляна

Ивангород

Ивано-Франковск

Иваново

Ивантеевка

Ижевск

Излучинск

Измир

Иланский

Инза

Иннополис

Инта

Иркутск

Исилькуль

Искитим

Испания

Истра

Ишим

Ишимбай

Йоханнесбург

Йошкар-Ола

Кавалерово (Посёлок городского типа)

Казань

Калачинск

Калининград

Калиновка

Калтан

Калуга

Каменск-Уральский

Каменск-Шахтинский

Каменское

Камень-на-Оби

Камышин

Кандалакша

Канск

Караганда

Карпинск

Карши

Касимов

Каспийск

Качканар

Кашин

Кашира

Кемерово

Керчь

Киев

Кимры

Кингисепп

Кинель-Черкассы

Кинешма

Киржач

Кириши

Киров

Кировск (Ленинградская область)

Киселёвск

Кисловодск

Кишинев

Клайпеда

Климовск

Клин

Клинцы

Кобрин

Ковдор

Ковров

Ковылкино

Когалым

Коломна

Колпино

Кольчугино

Коммунар

Комсомольск-на-Амуре

Конаково

Кондопога

Кондрово

Константиновск

Копейск

Кореновск

Коркино

Королёв

Коряжма

Костанай

Костомукша

Кострома

Котельники

Котлас

Краков

Краматорск

Краслава

Красная Поляна

Красногорск

Краснодар

Красное Село

Краснозаводск

Краснослободск

Красноуральск

Красноуфимск

Красноярск

Красный Бор

Красный Сулин

Кривой Рог

Кропивницкий

Кропоткин

Крымск

Кстово

Кубинка

Кудымкар

Кузнецк

Кулебаки

Кумертау

Курган

Курганинск

Курск

Кутаиси

Кушва

Кызыл

Кыштым

Кяхта

Лабинск

Лангепас

Лениногорск

Ленинск-Кузнецкий

Ленск

Лепель

Лермонтов

Лесной

Лесозаводск

Лесосибирск

Ливорно

Ликино-Дулёво

Лимасол

Липецк

Лиски

Лихославль

Лобня

Лодейное Поле

Лондон

лордФильм фильмы

Лосино-Петровский

Луга

Луганск

Луховицы

Лыткарино

Львов

Любек

Люберцы

Любляна

Людиново

Лянтор

Магадан

Магас

Магнитогорск

Майкоп

Малаховка

Малоярославец

Мамадыш

Мариинск

Мариуполь

Маркс

Марракеш

Махачкала

Мегион

Межвежьегорск

Междуреченск

Мелеуз

Мелитополь

Мерсин

Миасс

Миллерово

Минеральные Воды

Минск

Минусинск

Мирный

Михайловка

Мичуринск

Могилёв

Можга

Мозырь

Молодечно

Монино

Монреаль

Мончегорск

Морозовск

Моршанск

Москва

Московская Область

Муезерский

Муравленко

Мурино

Мурманск

Муром

Мценск

Мытищи

Мюнхен

Набережные Челны

Навашино

Надым

Назарово

Нальчик

Наро-Фоминск

Нахабино

Находка

Невельск

Невинномысск

Немиров

Нерчинск

Нерюнгри

Нефтекамск

Нефтекумск

Нефтеюганск

Нижневартовск

Нижнекамск

Нижний Новгород

Нижний Тагил

Нижняя Тура

Николаев

Никосия

Новоалександровск

Нововоронеж

Новокузнецк

Новокуйбышевск

Новомичуринск

Новомосковск

Новополоцк

Новороссийск

Новосибирск

Новотроицк

Новоуральск

Новочебоксарск

Новочеркасск

Новый Оскол

Новый Уренгой

Ногинск

Норильск

Ноябрьск

Нукус

Нур-Султан

Нурлат

Нью-Дели

Нью-Йорк

Нюрнберг

Нягань

Нязепетровск

Облучье

Обнинск

Обухово

Одесса

Одинцово

Озёрный

Озерск

Октябрьский

Омск

Онега

Опочка

Орел

Оренбург

Орехово-Зуево

Орск

Орша

Островец

Отрадный

Оха

Павлово

Павловск

Павловский Посад

Париж

Певек

Пенза

Первомайское

Первоуральск

Переславль-Залесский

Пермь

Петрозаводск

Петропавловск

Петропавловск-Камчатский

Печора

Печоры

Питкяранта

Пласт

Подольск

Подпорожье

Покачи

Покров

Полысаево

Полярный

Поронайск

Посёлок Афипский

Посёлок Ахтырский

Поселок Грибановка

Поселок Запрудня

Поселок Любучаны

Поселок Правдинский (Пушкинский район)

Поселок Раевский

Поселок Сабетта

Поселок Таксимо

Похвистнево

Приозерск

Прокопьевск

Промышленная (Посёлок городского типа)

Протвино

Прохладный

Псков

Пугачев

Пушкин

Пушкино

Пущино

Пхукет

Пыть-Ях

Пятигорск

Райчихинск

Ракитное

Раменское

Рассказово

Ревда

Реутов

Речица

Ржев

Рига

Рим

Ровно

Родники

Родос

Рославль

Россошь

Ростов-на-Дону

Роттердам

Ртищево

Рубцовск

Рудный

Руза

Рыбинск

Рыбница

Рязань

Салават

Салехард

Сальск

Самара

Самарканд

Санкт-Петербург

Саранск

Сарапул

Саратов

Саров

Сатка

Саяногорск

Светловодск

Светлогорск

Светлоград

Свободный

Севастополь

Северобайкальск

Северодвинск

Северодонецк

Североуральск

Северск

Сегежа

Село Дубовское (Ростовская область)

Село Кожевниково (Томская область)

Село Шипуново

Селятино

Семёнов

Серафимович

Сергач

Сергиев Посад

Серов

Серпухов

Сибай

Симферополь

Скопин

Скопье

Славгород

Славянск-на-Кубани

Сланцы

Слуцк

Смоленск

Сморгонь

Снежинск

Советск

Советская Гавань

Соликамск

Солнечногорск

Сортавала

Сосновый Бор

Сочи

Среднеуральск

Ставрополь

Стамбул

Станица Брюховецкая

Станица Гиагинская

Станица Динская

Станица Ильская

Станица Ленинградская

Станица Северская

Станица Холмская

Старая Русса

Староминская

Старый Оскол

Стерлитамак

Стокгольм

Стрежевой

Струнино

Ступино

Суджа

Суздаль

Сумы

Сургут

Сызрань

Сыктывкар

Сысерть

Таганрог

Талдом

Таллин

Тамань

Тамбов

Ташкент

Таштагол

Тбилиси

Тверь

Темрюк

Тикси

Тимашевск

Тирасполь

Тихвин

Тихорецк

Тобольск

Тольятти

Томилино

Томск

Топки

Торбеево

Торонто

Тосно

Тотьма

Троицк

Туапсе

Туймазы

Тула

Тучково

Тында

Тюмень

Ува (поселок)

Удачный

Удомля

Узловая

Улан-Удэ

Ульяновск

Урай

Уральск

Уренгой

Урюпинск

Усинск

Уссурийск

Усть-Илимск

Усть-Кут

Усть-Лабинск

Уфа

Ухта

Учалы

Фалькензе

Фано

Феодосия

Франкфурт-на-Майне

Фрязино

Фряново

Фурманов

Хабаровск

Ханты-Мансийск

Харцызск

Харьков

Хасавюрт

Хельсинки

Херсон

Химки

Хмельницкий

Хотьково

Цюрих

Чайковский

Чапаевск

Чебоксары

Челябинск

Череповец

Черкассы

Черкесск

Чернигов

Черновцы

Черноголовка

Черногорск

Чернушка

Чехов

Чистополь

Чита

Чкаловск

Чугуев

Чусовой

Шадринск

Шанхай

Шарыпово

Шатура

Шахты

Шексна

Шимановск

Шимкент

Шлиссельбург

Шпангенберг

Шумерля

Шуя

Шяуляй

Щекино

Щелково

Щербинка

Электрогорск

Электросталь

Электроугли

Элиста

Энгельс

Югорск

Югра

Южно-Сахалинск

Южноуральск

Юрга

Юрьевец

Юрюзань

Якутск

Ялта

Ялуторовск

Янаул

Ярославль

Ярцево

Ясногорск

Яхрома

Отзывы сотрудников о работодателе Ф-Дизайн(0)

Здесь пока никто не писал. Напишите отзыв первым!